1

HTML には、次のような (簡略化された) ドロップダウン リストが 2 つあります。

<select name="from" id="abs-from-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<select name="to" id="abs-to-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

これらの入力を制限して、ユーザーが最初のドロップダウン リストで「3」を選択すると、2 番目のドロップダウン リストで値「1」と「2」が完全に削除 (または無効化) され、その逆も同様になるようにします。 : ユーザーが 2 番目のドロップダウンで「4」を選択した場合、最初のドロップダウンから「5」を削除したいと考えています。(レンジスライダーのようなもの)

少しのjQueryコードでこれが可能であることは知っていますが、誰かがその方法を説明できますか?

編集：

私が試した小さな jQuery コードを追加しました。現在の値を選択して、次のドロップダウン要素を取得できます。しかし、「From」要素の現在の値よりも小さい「To」の値を無効にするにはどうすればよいですか。

$('[name="from"]').on("change", function() {
    var currentVal = $(this).attr('value');
    var toElem = $(this).next('[name="to"]');
});
4

4 に答える 4

0

onChange を追加する必要があります (最新のブラウザーでは onClick のオプションも使用できますが、onChange をお勧めします) 選択時に、みんながここで答えたようなことを行う js 関数を呼び出すイベント: jQuery remove options from select

選択にいくつかのIDを追加することをお勧めします。イベントリスナーを追加するには、次のようなことができます$('#idSelect1').change(function() {bla bla})

または、イベントを yout html に直接追加することもできます。

于 2013-07-10T14:56:26.343 に答える
0

動的選択リストを探していると思います: http://css-tricks.com/dynamic-dropdowns/

于 2013-07-10T14:57:26.590 に答える