私のページには 2 つの選択メニューがあります。
1 つ目は 3 つの値を持ちAll, Active, Unactive
、2 つ目はサーバーから取得したデータで埋められます。
それらを接続する必要があるため、最初のselect
メニューからオプションを選択すると、2 番目のメニューにはselect
特定のオプションのみが表示されます (2 番目の選択メニューをフィルター処理)
私の考えは、3つの要素を持つサーバーからデータを取得することでした:
[ { "Id": 1, "Name": "Active One", "Active":true },
{ "Id": 2, "Name": "Active Two", "Active":true },
{ "Id": 3, "Name": "Unactive One", "Active":false },
{ "Id": 4, "Name": "Unactive Two", "Active":false } ]
2 番目に行うことは、カスタム属性を持つすべてのオプションをその選択に追加することです。
<option value=' + n[index].Id + ' data-active='+n[index].Active+'>' + n[index].Name + '</option>
2 番目の選択のフィルタリングに問題があります。
再利用しやすいように、2 番目の選択項目をプラグイン内にラップしました。
ここに jsFiddle デモがあります: http://jsfiddle.net/Misiu/pr8e9/4/
私がこれを機能させたいのは、サーバーユーザーからの選択を入力した後、2番目の選択からすべてのオプションを選択できるようになることですが、最初の選択を変更すると、2番目の選択が更新され、適切なオプションのみが表示されます。
したがって、彼が選択する場合、またはActive
のみを選択できます。Active One
Active Two
編集: これは@oe.elvikのおかげで機能するソリューションです