使用javascript在多选输入中设置值答案

【问题标题】：Set value in the multiple select input with javascript使用javascript在多选输入中设置值
【发布时间】：2021-04-19 12:44:15
【问题描述】：

我在多选输入中设置多个值时遇到问题。例如，当我单击Show Selected Option 按钮时，我需要在多选输入中设置值 2,3（番茄酱、津津有味），然后该值将显示在输入字段中。

下面是我想要的结果：

下面是我尝试过的编码，我用过$('.selectpicker').val(value);这个方法，但是不能用。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>



<select class="selectpicker" value="" multiple data-live-search="true">
  <option value="1">Mustard</option>
  <option value="2">Ketchup</option>
  <option value="3">Relish</option>
</select>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();

function sendFunc(){
    var value = "2,3";
    $('.selectpicker').val(value);
}
</script>

希望有人能指导我如何解决这个问题。谢谢。

【问题讨论】：

标签： javascript bootstrap-multiselect

【解决方案1】：

Please read the documentation 用于通过代码以编程方式选择项目。他们已经非常清楚如何做到这一点。

...来自上面链接的文档：

您可以通过在元素上调用 val 方法来设置选定的值。 $('.selectpicker').selectpicker('val', ['Mustard','Relish']);

这里要注意的关键是值是一个数组，而不是一个字符串。

在您的代码中直接调用 .val() 与上述不同 - 您应该在文档页面上继续阅读以了解与 .selectpicker('val') 相比的区别。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>



<select class="selectpicker" value="" multiple data-live-search="true">
  <option value="1">Mustard</option>
  <option value="2">Ketchup</option>
  <option value="3">Relish</option>
</select>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();

function sendFunc(){
    var value = [2,3];
    $('.selectpicker').selectpicker('val',value);
}
</script>

【讨论】：