jqueryとAjaxを使用してseletpikerで動的に値を設定する

Question

データベースから都市リストが取得されていますが、編集中に選択した都市を表示したいと思います。

私はデータベースから値を取得するためにAjaxを使用しています。 それはうまく動作します。私はコントローラから応答データを取得します。 今問題は私はセレクタに値を設定することができません。 私はAjaxレスポンスで都市名を取得します。

私はいくつかの例を試しましたが、うまくいきませんでした。

ここにAjaxコードがあります。

$.ajax({ 
    type: "GET", 
    url: urlForGetCityList,    
    dataType: 'Json',     
    success: function(response){ 
     console.log(response.cityName); 

      // This is What i Tried For getting SeletBox Selected. 
     var $select = $('#city'); 
     $select.val(response.city).trigger('change'); 

     // I have also Tried Some Selct2 Option for it. But it didn't work. 
     $("#city").select2("val", response.city); 

     // And at Last I have tried for like simple select box. 
     $("#city").val(response.city); 

    }); 

これは正しく動作しません。 ここにSelectpikerのHTMLコードがあります。

<div class="col-md-4"> 
<div class="form-group"> 
    <label for="field-3" class="control-label">City *</label> 
    <select class="selectpicker" data-live-search="true" data-style="btn-white" name="city" id="city" 
     title="Select City"> 
     <option value="city1">City 1</option> 
     <option value="city2">City 2</option> 
    </select> 
</div> 
</div> 

Answer 1

あなたはすでにあなたがそれはあなたがthisをチェックする必要があり、そのようですので、ちょうどこの選択pikerが選択した値が表示されないという問題点だ半分にリーチ。 これを試してください。

$('select[name=city]').val(response.city); 
$('.selectpicker').selectpicker('refresh');