40

私は2つの選択肢があります：

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

最初の選択で Fruit を選択した場合、jQuery でそれを行うにはどうすればよいですか? 2 番目の選択では、Fruits (Banana、Apple、Orange) のみが表示されます。最初の選択で Bird を選択すると、2 番目の選択では Birds - Eagle, Hawk のみが表示されます。等々...

私はこのjQueryコードでそれをやろうとしました:

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

残念ながら、ほとんどすべてが削除され、いくつかのオプションを元に戻す方法がわかりません. クローンについても読みましたが、この場合の使い方がわかりません。

4

8 に答える 8

74 

$("#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>

jQuery data()を使用してデータを保存する

要素を非表示にすると、クロスブラウザー (2012) では機能しないと思いますが、自分でテストしていません。

于 2012-05-13T10:36:36.127 に答える
11

別のJSONファイルから$.getJSON（）を使用するバージョンを作成したかったのです。

デモ：ここ

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"
    ]
}
于 2012-10-16T15:19:38.683 に答える
9

すべての のオプションを変数に格納し#select2、 で選択したオプションの値に従ってそれらをフィルタリングし、 in#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');

ここにフィドルがあります

于 2012-05-13T10:19:09.060 に答える
2

私はsabithpockerのアイデアに基づいて構築し、特定のトリガーから複数の選択ボックスを制御できる、より一般化されたバージョンを作成しました.

制御したい選択ボックスに「切り替え可能」というクラス名を割り当て、次のようにすべて複製しました。

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

また、切り替え可能な選択に特定の命名規則を使用しました。これは、クラスにも変換できます。私の場合、「category」と「issuer」が選択名で、「category_2」と「issuer_1」がクラス名です。

次に、関数内で使用する $(this) のコピーを作成した後、select.switchable グループで $.each を実行しました。

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

制御したいものにクラス名を使用することにより、関数はページの他の場所 (Fiddle の例の最後のものなど) の他の選択を安全に無視します。

完全なコードを含むフィドルは次のとおりです。

于 2013-08-23T19:21:10.903 に答える
1

私は次のような解決策を見つけました...私にとって完璧に機能しています:)

$(document).ready(function(){
$("#selectbox1").change(function() {
    var id = $(this).val();
    $("#selectbox2").val(id);
 });   });
于 2016-05-25T11:34:58.810 に答える
1

これらの方法はすべて素晴らしいです。AJAX で「onchange」を使用して動的フォームを作成する好例である別の単純なリソースを見つけました。

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

最初のドロップダウンの選択に基づいて入力された別の選択ドロップダウンに、テキスト テーブル出力を変更しただけです。私のアプリケーションでは、ユーザーが州を選択すると、2 番目のドロップダウンに選択した州の都市が入力されます。上記の JSON の例によく似ていますが、php と mysql を使用しています。

于 2014-10-11T15:15:16.777 に答える