shubham jha shubham jha - 2 months ago 14
HTML Question

jQuery set select box to empty option

This is the jquery code that I am using which helps me in getting the values for a select box I need when I change the first select box.

$(document).ready(function () {
$("#select1").change(function(){
$('.quantity').val('');
$('#trblock').fadeIn();
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html('<option value="">').append(options);
});
});


What happens here is that whenever I change the select box value from 1st select box I get some values in the second select box. But when I roll back to the previously selected option in the 1st text box I find that the 2nd select box is already showing the options which I selected previously. What I want is whenever I change selecting the 1st select box option the 2nd select box should start with a blank option like
<option value=""></option>
instead of the previously selected option in 2nd select box.

To make it easy I roll it in points.


  1. Selected an option in 1st select box example "Animals".

    <select name="" id="select1">
    <option value=""></option>
    <option value="1">Animals</option>
    <option value="2">Games</option>
    <option value="3">Fruits</option>
    </select>

  2. Got some values in 2nd select box.

    <select name="" id="select2">
    <option value=""></option>
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Monkey</option>
    </select>

  3. Selected a value from the 2nd select box example "Dog".

  4. Then I thought to switch the selection from 1st select box so I selected "Fruits".

  5. Got some values in 2nd select box.

    <select name="" id="select2">
    <option value=""></option>
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Grapes</option>
    </select>

  6. I selected grapes this time. Ok, fine till here.

  7. But then if I again change my 1st selection to animals I should get the 2nd select box to start with the empty option (blank field) but Instead it starts with the previously selected "Dog". This is what I DO NOT want. Each time I change selecting the option from 1st select box I want second select box to start with the blank option field so that I can again choose from the full list i.e., "Cat", "Dog", "Monkey".


Answer

Add $('#select2').val('') at the last of select1's change event like following.

$("#select1").change(function () {
    $('.quantity').val('');
    $('#trblock').fadeIn();
    if ($(this).data('options') == undefined) {
        $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html('<option value="">').append(options);

    $('#select2').val(''); //add this line
});