Select2の値をjQueryで上書きできません

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> 

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

Javascriptを

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

し、値を変更してみてください。 select2関数のためにトリガーを追加する必要があります。

Answer 3

それは第一に、それはパラメータidを表しているものをはっきりしていない...ここ変数、パラメータと関数名は大きくないと言うこと

少し難しいです。 jQuery('#item-'+ id)は、IDが'#item-'+ idのDOM要素を選択しているため、表示されていないhtmlがあると思われます。この例では見つかりません。

第2に、jQuery('#item-'+ id)がselectから任意のオプションDOM要素を選択しているとすれば、$item.idと$item.nameを使用すると混乱していると思います。変数theValueToBeSetは$item.nameに設定されていますが、後での値を$item.idに設定するために使用します。

`` `` `jQueryの（のようにそれを設定した後、`

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