1

JavaScript またはその他のソリューションを使用して、ドロップダウン リストを変更または制限しようとしています。残念ながら、クライアント側を変更しようとしている HTML の出力方法を制御することはできません。ドロップダウン リストはサーバー側で生成されますが、ドロップダウン リストの選択肢をさらに制限するための追加オプションをユーザーに提供したいと考えています。

生成されたものを編集することはできませんが、HTML を挿入することはできます。

推奨される解決策の 1 つは、JavaScript を使用してドロップダウン リストを制限することです。たとえば、ドロップダウンは次の形式に従います。

<SELECT ID="dropdown_1">
<OPTION VALUE=""    >None
<OPTION VALUE="1000">AB-ITEM 1 DESCRIPTION
<OPTION VALUE="2001">AB-ITEM 2 DESCRIPTION
<OPTION VALUE="50"  >AB-ITEM 8 DESCRIPTION
<OPTION VALUE="70"  >BB-ITEM 3 DESCRIPTION
<OPTION VALUE="100" >BB-ITEM 5 DESCRIPTION
<OPTION VALUE="2"   >ABB-ITEM 4 DESCRIPTION
</SELECT>

テキストの先頭で制限したいもの、だから、、、AB-またはBB-このABB-場合。value韻や理由はなく、単なるインデックス番号です。これは単なるテキストであり、属性に関連付けられていないため、これは可能ではないと思います。

1つの考えは、次のことです。

  • リストを JavaScript 配列に格納する
  • 「TYPE-X%」などのエントリのみを保持
  • 元の HTML リストを削除する
  • 配列に格納された新しいリストに置き換えます

ただし、これが可能かどうかはわかりません。可能であれば、そのようなコードを作成するには何が必要でしょうか。関数や例へのヘルプや参照は大歓迎です。

4

2 に答える 2

2

（jQueryを使用して）何でも可能です：

$(document).ready(function() {
    $("#dropdown_1 option").hide();
    $("#dropdown_1 option").filter(":contains(TYPE-X)").show();
});

これの利点は、すべてのオプションがまだそこにあり、それらを見ることができないことです。したがって、デフォルトのリストに戻るために必要なのは、次の呼び出しだけです。

$("#dropdown_1 option").show();

正規表現の編集：

$(document).ready(function() {
    $("#dropdown_1 option").hide();
    $("#dropdown_1 option").filter(function() {
        return $(this).text().match(/^AB-/);
    }).show();
});

上記のような正規表現を使用してリストをフィルタリングできます。

this編集：フィルター関数のjQueryに関する注意は、DOM要素自体です。jQueryヘルパーメソッドにアクセスするにはtext()、最初に、上記で編集したように、そのDOM要素をjQuery関数でラップする必要があります。

于 2013-03-08T19:12:45.157 に答える
0

BinaryTox1n のおかげで、私の質問に対するすべてのブラウザーと互換性のあるソリューションを見つけるための良い道を歩むことができました。ただし、これは StackOverFlow の他のソリューションとは少し異なるアプローチです。

違いは、s をどのように扱うかOPTIONです。.hide()一部のブラウザーでは動作しますが、IE8 (およびその他のブラウザー) とは互換性がありません。の代替案やバリエーション.hide()も失敗しました。のもう 1 つの問題.hide()は、 も使用する必要があることです.disable()。最後の問題は、複数 (20 程度) のオプションがあり、2 つまたは 3 つしか表示されない場合、Chrome (およびおそらく他のブラウザー) がドロップダウン ボックスを適切にレンダリングしないことです。

見つかった最善のアプローチは、.remove()不要なオプションに対するものです。OPTIONは単純に削除されるため、互換性の問題はありません。ただし、必要に応じてオプションを追加できる柔軟性も必要です。したがって、以下は私が使用するもののバージョンです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var regex_str = "^AAB-";
    var dd1 = $("#dropdown1 option");

  //Clone the 'None', Current, and All options into respective variables.
  //All options are stored in order to allow different selection criteria
    var all_Opt  = dd1.clone(true);
    var none_Opt = dd1.filter(":contains(None)").clone(true);
    var cur_Opt  = dd1.filter(function(){
        return $(this).text().match(regex_str);
    }).clone(true);

  //Remove all options and replace the 'None' and Current options
    dd1.remove();
    noneOpt.appendTo($("#dropdown1"));
    curOpt.appendTo($("#dropdown1"));
});
</script>

追加したいのは、別のドロップダウン ボックスまたはその他のトリガーを使用してこれを変更できることだけです。

于 2013-03-13T14:24:36.250 に答える