javascript - jQuery set select box to empty option - Stack Overflow

admin管理员组

文章数量:1220960

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".

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".

• javascript
• php
• jquery
• html

Share Improve this question Follow edited Sep 18, 2016 at 17:41 Ibrahim Khan 20.7k77 gold badges4545 silver badges5656 bronze badges asked Sep 18, 2016 at 14:18 user6224087user6224087 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 14

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
});

本文标签： javascriptjQuery set select box to empty optionStack Overflow