I would like to ask how to filter the second dropdown list based on first dropdown list selected by user?
For example: If user select AIA in first dropdown list, the second dropdown list is disabled.
<tr>
<td NOWRAP WIDTH="15%"><font FACE="ARIAL" SIZE="2"><strong>Level 1 Organizer</strong></font></td>
<td NOWRAP >
<font FACE="ARIAL" SIZE="2"><strong>
<select name="Organizer" size="1" style="font-family: Arial; font-size: 10pt" onchange="Validate_Report_Level(this.value)">
<option value="Partnership">Partnership</option>
<option value="AIA">AIA</option>
<option value="Agency">Agency</option>
</select>
</strong></font>
</td>
</tr>
try this:
html:
<select class="selectItem" name="Organizer" size="1" style="font-family: Arial; font-size: 10pt">
<option value="Partnership">Partnership</option>
<option value="AIA">AIA</option>
<option value="Agency">Agency</option>
</select>
<select class="selectItem" name="Organizer" size="1" style="font-family: Arial; font-size: 10pt">
<option value="Partnership">Partnership</option>
<option value="AIA">AIA</option>
<option value="Agency">Agency</option>
</select>
Jquery:
$('.selectItem').on('change', function () {
var value = $(this).val();
$(this).addClass('selected');
$('.selectItem option:not(.selected)').prop('disabled', false);
$('.selectItem option[value="' + value + '"]:not(.selected)').prop('disabled', true);
$(this).removeClass('selected');
});