2017-11-27 8 views
1

jquery/bootstrapコーディングでは新しく、次のことを達成したいと考えています。私はいくつかのオプションを持つselect(マルチプレイスのブートストラップを使用)を持っています。このリストの中で、配列の値と一致するすべてのオプションを選択しようとします(下のコードのlist1)。しかし、オプションの値を調べる代わりに、オプションのデータ属性(以下のコードではリスト2)をチェックする必要があります。jqueryのデータ属性に基づいてブートストラップマルチセレクションの値を選択してください

私のドロップダウン

<form> 
    <select class="form-control" id="list1" multiple="multiple"> 
    <option data-vendorid="001" value="001">some-value-1</option> 
    <option data-vendorid="002" value="002">some-value-2</option> 
    <option data-vendorid="003" value="003">some-value-3</option> 
    </select> 

    <select class="form-control" id="list2" multiple="multiple"> 
    <option data-vendorid="001" value="some-value-1">some-value-1</option> 
    <option data-vendorid="002" value="some-value-2">some-value-2</option> 
    <option data-vendorid="003" value="some-value-3">some-value-3</option> 
    </select> 
</form> 

マイスクリプト

var arr = [{ 
    "attr-1": "attr-value-1", 
    "attr-2": "attr-value-2", 
    "id": "001" 
}, { 
    "attr-1": "attr-value-1", 
    "attr-2": "attr-value-2", 
    "id": "003" 
}]; 

//If I look for the default value, it works: 
for (var i = 0; i < arr.length; i++) { 
    $('#list1').multiselect('select', arr[i].id); 
} 

//So I tried something like this, but can't figure it out 
for (var i = 0; i < arr.length; i++) { 
    $('#list2').multiselect('select', $(arr[i]).data('vendorid')); 
} 

チェックmy updated fiddle

ヘルプはずっと

+0

「attr-1」:「attr-value-1」のキーと値のペアは何ですか? – dferenc

+0

でも、リスト1では値は見ていませんが属性 'id'にあります。 –

+0

"attr-1": "attr-value-1">実際には、キーと値のペア –

答えて

0

を使用して配列要素を選択する必要があり、私は思います次のようなデータマッピングを実行しようとしています:

var map = {}; 
$('#list2').find('option').each(function(index, elem) { 
    map[$(elem).data('id')] = elem.value; 
}); 

for (var i = 0; i < arr.length; i++) { 
    $('#list2').multiselect('select', map[arr[i]['id']]); 
} 

docs of the multiselect jQuery pluginによれば、.multiselect('select', String|Array)メソッドは、文字列またはオプション値の配列が選択されることを前提としています。他の属性に基づいてセレクタインを実行しようとするときには、格納されたレコードをオプション値にマップする「辞書」を作成する必要があります。上記の例がそうです。

更新:
フィドルの正確な属性名を反映するようにコードを更新しました。

+0

素晴らしい、これはそれを解決! –

0

使用

$('#list2').multiselect('select', $(arr[i]).data('id')); 

.data()を高く評価しているjQueryのが提供する機能であるので、あなたがあなたのコメントに基づいて$最初

+0

これは問題を解決しません。それはコードを動作させます(ありがたいことに)が、データ属性を探すことはありません。私はより多くの論理を作るために私のフィドルを更新しました。 [フィドル](http://jsfiddle.net/stevenschutter/gpSqc/706/) –

関連する問題