Use jQuery to change a second select list based on

2018-12-31 17:18发布

站内文章 / jQuery
60 0 0

问题:

I have two selects:

<select name=\"select1\" id=\"select1\">
    <option value=\"1\">Fruit</option>
    <option value=\"2\">Animal</option>
    <option value=\"3\">Bird</option>
    <option value=\"4\">Car</option>
</select>

<select name=\"select2\" id=\"select2\">
    <option value=\"1\">Banana</option>
    <option value=\"1\">Apple</option>
    <option value=\"1\">Orange</option>
    <option value=\"2\">Wolf</option>
    <option value=\"2\">Fox</option>
    <option value=\"2\">Bear</option>
    <option value=\"3\">Eagle</option>
    <option value=\"3\">Hawk</option>
    <option value=\"4\">BWM<option>
</select>

How do I do that with jQuery if I choose Fruit in the first select? The second select would show me only Fruits - Banana, Apple, Orange. If I choose Bird in the first select, the second select would show me only Birds - Eagle, Hawk. And so on...

I tried to do it with this piece of jQuery code:

$(\"#select1\").change(function() {
    var id = $(this).val();
    $(\'#select2 option[value!=\'+id+\']\').remove();
});

Unfortunately, it removes almost everything, and I have no idea how to bring back some options. I also read something about clone, but I don\'t know how to use it in this case.

回答1:

$(\"#select1\").change(function() {
  if ($(this).data(\'options\') === undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data(\'options\', $(\'#select2 option\').clone());
  }
  var id = $(this).val();
  var options = $(this).data(\'options\').filter(\'[value=\' + id + \']\');
  $(\'#select2\').html(options);
});
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js\"></script>
<select name=\"select1\" id=\"select1\">
  <option value=\"1\">Fruit</option>
  <option value=\"2\">Animal</option>
  <option value=\"3\">Bird</option>
  <option value=\"4\">Car</option>
</select>


<select name=\"select2\" id=\"select2\">
  <option value=\"1\">Banana</option>
  <option value=\"1\">Apple</option>
  <option value=\"1\">Orange</option>
  <option value=\"2\">Wolf</option>
  <option value=\"2\">Fox</option>
  <option value=\"2\">Bear</option>
  <option value=\"3\">Eagle</option>
  <option value=\"3\">Hawk</option>
  <option value=\"4\">BWM<option>
</select>

Using jQuery data() to store data

I guess hiding elements doesn\'t work cross-browser(2012), I have\'nt tested it myself.



回答2:

I wanted to make a version of this that uses $.getJSON() from a separate JSON file.

Demo: here

JavaScript:

$(document).ready(function () {
    \"use strict\";

    var selectData, $states;

    function updateSelects() {
        var cities = $.map(selectData[this.value], function (city) {
            return $(\"<option />\").text(city);
        });
        $(\"#city_names\").empty().append(cities);
    }

    $.getJSON(\"updateSelect.json\", function (data) {
        var state;
        selectData = data;
        $states = $(\"#us_states\").on(\"change\", updateSelects);
        for (state in selectData) {
            $(\"<option />\").text(state).appendTo($states);
        }
        $states.change();
    });
});

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\"></script>
</head>
<body>
    <select id=\"us_states\"></select>
    <select id=\"city_names\"></select>
    <script type=\"text/javascript\" src=\"updateSelect.js\"></script>
</body>
</html>

JSON:

{
    \"NE\": [
        \"Smallville\",
        \"Bigville\"
    ],
    \"CA\": [
        \"Sunnyvale\",
        \"Druryburg\",
        \"Vickslake\"
    ],
    \"MI\": [
        \"Lakeside\",
        \"Fireside\",
        \"Chatsville\"
    ]
}


回答3:

Store all #select2\'s options in a variable, filter them according to the value of the chosen option in #select1, and set them using .html() in #select2:

var $select1 = $( \'#select1\' ),
    $select2 = $( \'#select2\' ),
    $options = $select2.find( \'option\' );

$select1.on(\'change\', function() {
    $select2.html($options.filter(\'[value=\"\' + this.value + \'\"]\'));
}).trigger(\'change\');

Here\'s a fiddle



回答4:

I built on sabithpocker\'s idea and made a more generalized version that lets you control more than one selectbox from a given trigger.

I assigned the selectboxes I wanted to be controlled the classname \"switchable,\" and cloned them all like this:

$j(this).data(\'options\',$j(\'select.switchable option\').clone());

and used a specific naming convention for the switchable selects, which could also translate into classes. In my case, \"category\" and \"issuer\" were the select names, and \"category_2\" and \"issuer_1\" the class names.

Then I ran an $.each on the select.switchable groups, after making a copy of $(this) for use inside the function:

var that = this;
$j(\"select.switchable\").each(function() { 
    var thisname = $j(this).attr(\'name\');
    var theseoptions = $j(that).data(\'options\').filter( \'.\' + thisname + \'_\' + id );
    $j(this).html(theseoptions);
});

By using a classname on the ones you want to control, the function will safely ignore other selects elsewhere on the page (such as the last one in the example on Fiddle).

Here\'s a Fiddle with the complete code:



回答5:

All of these methods are great. I have found another simple resource that is a great example of creating a dynamic form using \"onchange\" with AJAX.

http://www.w3schools.com/php/php_ajax_database.asp

I simply modified the text table output to anther select dropdown populated based on the selection of the first drop down. For my application a user will select a state then the second dropdown will be populated with the cities for the selected state. Much like the JSON example above but with php and mysql.



回答6:

I have found the solution as followiing... working for me perfectly :) 

$(document).ready(function(){
$(\"#selectbox1\").change(function() {
    var id = $(this).val();
    $(\"#selectbox2\").val(id);
 });   });


标签： jquery html select
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~