Используйте jQuery для изменения второго списка выбора на основе первой опции списка выбора

У меня есть два выбора:

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

Как мне сделать это с помощью jQuery, если я выбираю Fruit в первом выборе? Второй выбор покажет мне только Фрукты - Банан, Яблоко, Оранжевый. Если я выберу Птицу в первом выборе, второй выбор покажет мне только Птицы - Орел, Ястреб. И так далее...

Я попытался сделать это с помощью этого куска кода jQuery:

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

К сожалению, он удаляет почти все, и я не знаю, как вернуть некоторые параметры. Я также читал кое-что о клоне, но я не знаю, как его использовать в этом случае.

Ответ 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>

Ответ 2

Я хотел создать версию этого, которая использует $.getJSON() из отдельного файла JSON.

Демо: здесь

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

Сохраните все параметры #select2 в переменной, отфильтруйте их в соответствии со значением выбранного параметра в #select1 и установите их с помощью .html() в #select2:

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

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

Здесь скрипка

Ответ 4

Я построил идею sabithpocker и сделал более обобщенную версию, которая позволяет вам контролировать более одного selectbox из заданного триггера.

Я назначил selectboxes, которым я хотел управлять классом "switchable", и клонировал их так:

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

и использовал определенное соглашение об именах для переключаемых выборок, которые также могли бы перевести на классы. В моем случае "категория" и "эмитент" были именами имен и "category_2" и "issuer_1" именами классов.

Затем я запустил $.each в группах select.switchable после создания копии $(this) для использования внутри функции:

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

Используя имя класса в тех, которые вы хотите контролировать, функция будет безопасно игнорировать другие варианты в другом месте на странице (например, последний в примере на скрипте).

Здесь сценарий с полным кодом:

Ответ 5

Все эти методы великолепны. Я нашел еще один простой ресурс, который является отличным примером создания динамической формы с использованием "onchange" с AJAX.

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

Я просто изменил вывод текстовой таблицы в раскрывающийся список выбора пыльника, заполненный на основе выбора первого раскрывающегося списка. Для моего приложения пользователь выберет состояние, затем второе раскрывающееся меню будет заполнено городами для выбранного состояния. Очень похоже на пример JSON, но с php и mysql.

Ответ 6

Я нашел решение в качестве следующего... работаю для меня отлично:)

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