無法使用jQuery覆蓋Select2值

Question

我在表單中使用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")
}

我在控制台中沒有任何錯誤。 我想念/做錯了什么？

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

Answer 2

我希望這是您要尋找的。

以下是用於更改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函數，我必須添加觸發器。

Answer 3

很難說出來，因為這里的變量，參數和函數名稱並不好...

首先，不清楚參數id代表什么。 我懷疑沒有html，因為jQuery('#item-'+ id)選擇的ID為'#item-'+ id的DOM元素，在您的示例中找不到。

其次，假設jQuery('#item-'+ id)正在從select中選擇任意選項DOM元素，我認為使用$item.id和$item.name時您會感到$item.name 。 變量theValueToBeSet設置為$item.name ，但是您稍后將使用它來設置select的值 $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")
}