0

こんにちは皆さん、2 つのドロップダウン選択があります。ユーザーが最初のものを選択すると、対応する値を持つ 2 番目のオプションのみが表示されますが、値を一意の値に変更し、2 番目の href を使用する必要があります値をリンクするためのオプションのセットは、js を次に示します。

jQuery.fn.filterOn = function(selectFrom, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);
        console.log(selectFrom);
        $(selectFrom).change(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).val()];
            console.log(haystack);
            $.each(options, function(i) {
                var option = options[i];
                if($.inArray(option.value, haystack) !== -1) {
                    $(select).append(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

次に、これは選択がどのように見えるかです:

<select id="1" name="1">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="2" name"2">
<option href="1" value="1">1</option>
<option href="1" value="1">2</option>
<option href="1" value="1">3</option>
<option href="2" value="2">1</option>
<option href="2" value="2">2</option>
<option href="2" value="2">3</option>
</select>

私がする必要があるのは、値ではなく href に従ってソートするように 2 番目の選択を取得することです。

現在のところ、最初の選択で値として1のオプションを選択すると、2番目の選択で対応する値を持つオプションのみが表示されますが、対応するhrefを持つものを表示する必要があります

4

1 に答える 1

1 
$('select#1').on('change', function() {
  $('select#2 option[href="'+ this.value +'"]').show();
  $('select#2 option[href!="'+ this.value +'"]').hide();
});

デモ

または、単一のチェーンで:

$('select#1').on('change', function() {
    $('select#2')
          .find('option[href="'+ this.value +'"]') // find options with selected value           
          .show() // show them
          .end()  // backtrack to select#2
          .find('option[href!="'+ this.value +'"]') // find don't match options
          .hide();  // hide unmatched options
});

デモ

ノート

数値のみを使用しないでくださいid。

于 2012-08-14T18:12:24.897 に答える