Question

<select id="studentinst" size="6">
    <option value="1">First Installment</option>
    <option value="2">Second Installment</option>
    <option value="3">Third Installment</option>
    <option value="4">Fourth Installment</option>
    <option value="5">Fifth Installment</option>
    <option value="6">Sixth Installment</option>
</select>

If I select 4, it should only display the first 4 options and the rest should be hidden.
Desired output:

  First Installment
  Second Installment  
  Third Installment
  Fourth Installment

How can I achieve this using jQuery?

see sample link check this link… for loop doesn’t work over here

Answer 1

$('#studentinst').change(function() {
    if ($('option:selected').val() == 4) {

        $("#studentinst option[value=5]").remove();
        $("#studentinst option[value=6]").remove();
    }
    else {
        if ($('#studentinst option[value=5]').val() == null)

        $('<option>').text('Fifth Installment').val(5).appendTo($('#studentinst'));

        if ($('#studentinst option[value=6]').val() == null) $('<option>').text('Sixth Installment').val(6).appendTo($('#studentinst'));
    }
});

If hide doesn’t work as expected, this is another way to do it.

see sample