無法使用Jquery / Javascript和CSS動態附加選項元素

Question

我有一個問題。 我正在嘗試動態添加選項標簽，但使用Jquery / Javascript無法正確添加選項標簽。在這里，我還使用了bootstrap chosen-select類。 我在下面解釋我的代碼。

<div class="popover-content">
<p>                            
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>

我的JavaScript代碼如下。

var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
    var obj=JSON.parse(data);
    if(obj.isData==1){
        $('#ctid').find('option').not(':first').remove();
        $.each(obj.cid, function() {
    $("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
        })
    }
})

我也在這里正確地獲取數據並且循環也正在運行。但是它沒有反映在前端。當我檢查元素時，我得到了下面生成的html代碼。

<div class="popover-content">
<p>                            
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>

原始的html代碼在動態添加選項后生成了上面的部分。但是我的問題是前端視圖中沒有顯示該文本，請幫助我解決此問題。

Answer 1

我認為每個循環每個對象並將索引作為其第一個參數，將val作為第二個，請嘗試以下操作：

$.each(obj.cid, function(idx, o) {
  $("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});

如果您想在生成的ul中獲得這些選項，請確保在開始選擇之前先附加它們。

$.each(obj, function(idx, o) {
  $("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});

$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();

HTML

<div class="popover-content">
  <p>                            
    <select class="text-left" style="width:100%;" id="ctid">
      <option value="" selected>Select City</option>
    </select>
  </p>
</div>

希望這可以幫助