multiselect选中_JQuery Bootstrap Multiselect插件-设置在multiselect下拉列表中选择的值

这篇博客介绍了如何在使用JQuery Bootstrap Multiselect插件时,根据给定的值数组设置多选下拉列表的选择状态。示例代码展示了如何遍历数组并选中对应的复选框。
摘要由CSDN通过智能技术生成

JQuery Bootstrap Multiselect插件-设置在multiselect下拉列表中选择的值

我正在使用Boostrap Multiselect插件([http://davidstutz.de/bootstrap-multiselect/)]进行多选下拉列表,如下所示

foo

bar

bat

baz

在页面加载时,我将得到一个值数组,如[101,102]。我应该遍历数组并选择值(应选中与ID对应的复选框)。请帮忙。

16个解决方案

142 votes

//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");

Tapon Sayeem answered 2020-01-20T09:00:17Z

23 votes

谢谢大家的答案。

以您的所有答案为指导,我使用以下代码解决了该问题:

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");

}

再次感谢您的支持。

Prince answered 2020-01-20T09:00:45Z

18 votes

它应该像这样简单:

1

2

3

$('#multipleSelect').val(['1', '2']);

检查我的小提琴:[https://jsfiddle.net/luthrayatin/jaLygLzo/]

Yatin answered 2020-01-20T09:01:10Z

10 votes

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);

}

这是一个演示

Shef answered 2020-01-20T09:01:29Z

5 votes

对我来说工作正常,请根据您的要求更改ID。

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

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

Basant Rules answered 2020-01-20T09:01:49Z

4 votes

该代码应有助于:

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);

}

zb' answered 2020-01-20T09:02:09Z

3 votes

从PHP数组到多选...

$PHP_array=array(); // create array anyway you need to in PHP

array_push($PHP_array,20); // Single ID values

array_push($PHP_array,22);

$javascript_str = json_encode($PHP_array); // JSON ENCODE

//然后在JS脚本中

$("#multiselectbox").val(<?php echo $javascript_str; ?>);

// Then refresh

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

PodTech.io answered 2020-01-20T09:02:33Z

2 votes

var valArr = ["1","2","3"];

/* Below Code Matches current object's (i.e. option) value with the array values */

/* Returns -1 if match not found */

$("select").multiselect("widget").find(":checkbox").each(function(){

if(jQuery.inArray(this.value, valArr) !=-1)

this.click();

});

这将选择其值与数组中的值匹配的选项。

Anubhav Trivedi answered 2020-01-20T09:02:53Z

2 votes

官方网站已经提到(在“手动选中或取消选中复选框?”部分中)只是为了使用click()

例如

$("#ddl_singleSelect")

.multiselect("widget")

.find(":radio[value='']").click(); // change displayed selectedText

$("#ddl_singleSelect option[value='']")

.prop("selected", true) // change val()

.trigger("change"); // fire change event

$("#ddl_multiselect").multiselect("uncheckAll"); // init by de-selecting all

$("#ddl_multiselect")

.multiselect("widget")

.find( ":checkbox[value='1']"

+ ",:checkbox[value='2']"

+ ",:checkbox[value='3']"

+ ",:checkbox[value='4']"

).click(); // change displayed selecetdText

$("#ddl_multiselect")

.find( "option[value='1']"

+ ",option[value='2']"

+ ",option[value='3']"

+ ",option[value='4']"

).prop("selected", true); // change val()

$("#ddl_multiselect").trigger("change"); // fire change event

或通过HTML

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

Option 8

Option 9

....

vientoho answered 2020-01-20T09:03:22Z

2 votes

我从jquery-multiselect文档中得到了更好的解决方案。

var data = [101,102];

$("#data").multiSelect('deselect_all');

$("#data").multiSelect("select",data);

Sree answered 2020-01-20T09:03:41Z

0 votes

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

$("#dropDownId").selectmenu('refresh');

amit kate answered 2020-01-20T09:03:57Z

0 votes

这是我的代码示例。我有逗号分隔的数字,用于多选下拉菜单,并且想从逗号分隔的值中选择多个选项。

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);

}

}

});

mahesh kajale answered 2020-01-20T09:04:17Z

0 votes

这是我使用数组作为输入的结果。 首先取消选中所有选项,然后使用jquery单击选定的选项

var dimensions = ["Dates","Campaigns","Placements"];

$(".input-dimensions").multiselect("uncheckAll");

for( var dim in dimensions) {

$(".input-dimensions").multiselect("widget")

.find(":checkbox[value='" + dimensions[dim] + "']").click();

}

Laurent Jacquot answered 2020-01-20T09:04:37Z

0 votes

我最终不得不在输入click元素后使用click事件进行轻微更改,方法是在触发click事件之后还要设置选中的prop。

$(y.Ctrl).multiselect("widget").find(":checkbox").each(function () {

if ($.inArray(this.value, uniqueVals) != -1) {

$(this).click();

$(this).prop('checked', true);

}

});

Adam answered 2020-01-20T09:04:57Z

0 votes

希望这些功能对您有所帮助。

$('#your-select')。multiSelect('select',String | Array);

$('#your-select')。multiSelect('deselect',String | Array);

$('#your-select')。multiSelect('select_all');

$('#your-select')。multiSelect('deselect_all');

$('#your-select')。multiSelect('refresh');

本网站参考  参考

LetsCMS Pvt Ltd answered 2020-01-20T09:05:43Z

-2 votes

您可以尝试以下方法:

$( "#data" ).val([ "100", "101" ]);

aatish answered 2020-01-20T09:06:03Z

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值