无法用 jQuery 覆盖 Select2 值答案

【问题标题】：Can't overwrite Select2 value with jQuery无法用 jQuery 覆盖 Select2 值
【发布时间】：2016-11-28 06:59:13
【问题描述】：

我在我的表单中使用 select2，并且使用 jQuery，我正在尝试为其设置默认值；但是无论我尝试什么都没有用。首先，这是我的 html 表单：

<div class="form-group>
   <div class="col-xs-12">
      <div class="form-material">
          <label for="item" style="font-size: 14px; margin-bottom: 5px">Name:</label>
          <select id="itemSelect" class="js-select2" name="item" data-placeholder="Select Item..">
               <option></option>
               @foreach ($establishments as $establishment)
                    <option value="{{$item->id}}">{{ $item->name }}</option>
               @endforeach
         </select>         
     </div>
  </div>
</div>

然后，在我的 jquery 中，我试图在上面写一个默认值。

function somethingClick(id) {
   var theValueToBeSet = jQuery('#item-'+ id).html();  // logs "TestData"

   // First I tried;
   jQuery('#itemSelect').val(theValueToBeSet);

   // Secondly:
   jQuery('#itemSelect').select2('val', theValueToBeSet);

  // Thirdly:
   jQuery('#itemSelect').val(theValueToBeSet).trigger("change")
}

我在控制台中没有收到任何错误。我错过了什么/做错了什么？

【问题讨论】：

在将jQuery('#itemSelect') 设置为jQuery('#itemSelect').val(theValueToBeSet).trigger("change") 之后尝试读取它时是否得到“null”？

标签： javascript jquery select select2

【解决方案1】：

检查下面你必须触发的代码：

 $("#itemSelect").val(theValueToBeSet).trigger("change");

Hope this will help you !!

以下代码运行正常：

("#SelectId").select2({
        placeholder: "-Select Options-"
    });
    if ($('#FirstListId').val() != 0) {
        var olddata = $("#SelectId").val();
        $.getJSON('/Home/GetSelectList/' + $('#FirstListId').val(), function (data) {
            var items;
            $.each(data, function (i, secondList) {
                items += "<option value='" + secondList.Value + "'>" + secondList.Text + "</option>";
            });
            $('#SelectId').html(items);
            $("#SelectId").val(olddata).trigger("change");
        });
    }

【讨论】：

我也试过了，但忘了把它添加到我的问题中。我现在加了。这也不起作用。我可以请您删除答案吗？
jQuery('#itemSelect').val(theValueToBeSet).trigger("change") 对我不起作用 :// 它一定是别的东西

【解决方案2】：

我希望这就是你要找的。p>

以下是更改 select 值的示例链接。

HTML

<select class="test">
    <option value="">-</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

Javascript

$(".test option[value=3]").prop("selected","selected").trigger("change");

https://jsfiddle.net/synz/7yc96mo5/1/

并尝试更改值。由于 select2 功能，我必须添加触发器。

【讨论】：

【解决方案3】：

这里的变量、参数和函数名称不太好，有点难以分辨...

首先，不清楚参数id 代表什么。我怀疑我们没有看到 html，因为 jQuery('#item-'+ id) 正在选择一个 ID 为 '#item-'+ id 的 DOM 元素，我在您的示例中找不到。

其次，假设 jQuery('#item-'+ id) 正在从 select 中选择任意选项 DOM 元素，我认为您在使用 $item.id 和 $item.name 时会混淆。变量theValueToBeSet 设置为$item.name，但是稍后您将使用它来设置选择的值，即$item.id。

尝试将您的 js 修改为以下内容

function somethingClick(id) {
   var theValueToBeSet = jQuery('#item-'+ id).attr('value');  // <- This line changed

   // First I tried;
   jQuery('#itemSelect').val(theValueToBeSet);

   // Secondly:
   jQuery('#itemSelect').select2('val', theValueToBeSet);

  // Thirdly:
   jQuery('#itemSelect').val(theValueToBeSet).trigger("change")
}

【讨论】：