jquery - JQuery Bootstrap Multiselect プラグイン - 複数選択ドロップダウンで選択された値を設定します

Question

以下のように、Boostrap Multiselect プラグイン ( http://davidstutz.de/bootstrap-multiselect/ ) を使用して複数選択ドロップダウンを作成しています。

<select id="data" name="data" class="data" multiple="multiple">
  <option value="100">foo</option>
  <option value="101">bar</option>
  <option value="102">bat</option>
  <option value="103">baz</option>
</select>

ページの読み込み時に、[101,102] のような値の配列を取得します。配列を反復処理し、値を選択する必要があります (ID に対応するチェック ボックスをオンにする必要があります)。助けてください。

Answer 1

//Do it simple

var data="1,2,3,4";

//Make an array

var dataarray=data.split(",");

// Set the value

$("#multiselectbox").val(dataarray);

// Then refresh

$("#multiselectbox").multiselect("refresh");

Answer 2

回答ありがとうございます。

すべての回答をガイドラインとして、以下のコードで問題を解決しました。

var valArr = [101,102];
i = 0, size = valArr.length;
for(i; i < size; i++){
  $("#data").multiselect("widget").find(":checkbox[value='"+valArr[i]+"']").attr("checked","checked");
  $("#data option[value='" + valArr[i] + "']").attr("selected", 1);
  $("#data").multiselect("refresh");
}

皆様のご支援に改めて感謝申し上げます。

Answer 3

var valArr = [101,102], // array of option values
    i = 0, size = valArr.length, // index and array size declared here to avoid overhead
    $options = $('#data option'); // options cached here to avoid overhead of fetching inside loop

// run the loop only for the given values
for(i; i < size; i++){
    // filter the options with the specific value and select them
    $options.filter('[value="'+valArr[i]+'"]').prop('selected', true);
}

これがデモです

Answer 4

あなたの要件に応じてIDを変更してください。

$("#FormId select#status_id_new").val('');
 $("#FormId select#status_id_new").multiselect("refresh");

Answer 5

そのコードは役立つはずです：

var selected=[101,103];
var obj=$('#data');
for (var i in selected) {
    var val=selected[i];
    console.log(val);
   obj.find('option:[value='+val+']').attr('selected',1);
}

Answer 6

これは私のコードサンプルです。複数選択ドロップダウン用のコンマ区切りの数字があり、コンマ区切りの値から複数のオプションを選択したいと考えています。

var selected_tags_arr = new Array();
var selected_tags = 1,2,4;
selected_tags_arr = selected_tags.split(",");
$('#contact_tags option').each(function (){
    var option_val = this.value;
    for (var i in selected_tags_arr) {
        if(selected_tags_arr[i] == option_val){
            $("#contact_tags option[value='" + this.value + "']").attr("selected", 1);
        }
    }
});

Answer 7

クリックイベントを発生させた後にチェック済みの小道具も設定することで、入力要素のクリックイベントを使用してわずかな変更を加える必要がありました。

$(y.Ctrl).multiselect("widget").find(":checkbox").each(function () {
    if ($.inArray(this.value, uniqueVals) != -1) {
        $(this).click();
        $(this).prop('checked', true);
    }
});

Answer 8

$("#dropDownId").val(["130860","130858"]);
$("#dropDownId").selectmenu('refresh');