removing all options of select box except 1st option

I’m trying to empty select options when:

id “mClick” is selected, id’s “sClick”, “cClick” & “srClick” will be emptied.

id “sClick” is selected, id’s “cClick” & “srClick” will be emptied.

id “cClick” is selected, id “srClick” will be emptied.

<form action="javascript:void(0);" method="POST" id="lForm"><table>    <tr>        <td>            <select name="module" id="mClick">                <option value="">Select Mod</option>                <option value="1">Mod 1</option>                <option value="2">Mod 2</option>                <option value="3">Mod 3</option>            </select>        </td>        <td>            <select name="state" id="sClick">                <option value="">Select State</option>                <option value="1">State 1</option>                <option value="2">State 2</option>            </select>        </td>        <td>            <select name="city" id="cClick">                <option value="">Select City</option>                <option value="1">City 1</option>                <option value="2">City 2</option>            </select>        </td>        <td>            <select name="services" id="srClick">                <option value="">Select Services</option>                <option value="1">Services 1</option>                <option value="2">Services 2</option>            </select>        </td>    </tr></table>

in scenario 3, i used this function, yet it deleted all, except the last select. Any idea’s what i’m missing? Thanks

$('#lForm select[id!="mClick"] select[id!="sClick"] select[id!="cClick"] option[value!=""]').remove().end();

The easiest way to clear the options in the way you’re describing is by using options.length = 1. Also, you can leverage the fact that each drop down clears the ones that logically follow it, so that you only need to declare a single alter handler.

$('#lForm select').on('change', function() {  if (this.selectedIndex > 0) {    var $others = $(this).closest('table').find('select'),    current = $others.index(this); // find current    while (++current < $others.length) {      // for each following drop down      $others.get(current).options.length = 1;    }  }});

Demo

I’m not sure how you’re going to repopulate the drop downs though 🙂