如何使用 jquery/javascript 重置选择的类 li 元素

Question

我需要一些帮助。我需要再次重置由chosen-select jQuery 插件自动创建的所有li 元素。

<link href="css/chosen.css" rel="stylesheet">
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<div class="popover-content">
<p>                            
<select class="chosen-select text-left" style="width:100%;"  onchange="setCountry();" id="conid">
<option value="" selected>Select Country</option>
<?php
foreach ($country as $v) {
?>
<option value="<?php echo $v['country_id']; ?>"><?php echo $v['country_name']; ?></option>
    <?php
 }
?>
</select>
</p>
</div>
<div id="popupcity" class="popover" style="width:270px">
<div class="arrow"></div>
<h3 class="popover-title">Select City</h3>
<div class="popover-content" id="ctchoosen">
<p>                            
<select class="text-left" style="width:100%;" id="ctid" onchange="setCity();">
<option value="" selected>Select City</option>
</select>
</p>
</div>
</div>

当用户选择国家时，城市值将被添加到城市选择列表中。

function setCountry(){
        var conval=document.getElementById('conid');
        var selectVal='';
        if (conval.selectedIndex == -1){
            return null;
        }else{
            selectVal=conval.options[conval.selectedIndex].text;
            $("#popupcountry").removeClass("in");
        }
        document.getElementById('bindCon').innerHTML=selectVal;
        $('#borderCon').css('border', '');
        //console.log('contr',conval.options[conval.selectedIndex].value);
        var url="common.php?action=getCity";
        $.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
            var obj=JSON.parse(data);
            console.log('data1',obj);
            var ctData='';
            $('#ctid').find('option').not(':first').remove();
            $('#ctid').removeClass('chosen-select');
            $('.chosen-select').chosen();
            if(obj.isData==1){
                ctData=obj.cid;
                $.each(ctData, function(idx, o) {

                    $("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
                    //$("#ctchoosen > ul").append('<li class="active-result" data-option-array-index='+this.city_id+'>'+this.city_name+'</li>');
                })
                $('#ctid').addClass('chosen-select');
                $('.chosen-select').chosen();
            }
        })
      }

当用户在国家/地区选择列表中选择任何选项时，城市正在追加，我需要选择框/自动创建的列表项元素中的城市进行更新。

我可以重置选择框，但无法重置自动创建的列表项元素，当用户选择城市所属的任何新国家/地区时，这些元素不会向用户显示。我也在使用 PHP 进行数据库操作。

Answer 1

Chosen 提供了一个可以触发的事件。来自the documentation：

• 动态更新选择

  如果您需要更新选择字段中的选项并希望 Chosen 获取更改，则需要在该字段上触发“chosen:updated”事件。选择将根据更新的内容重新构建自己。

  $("#form_field").trigger("chosen:updated");
  

  ¹

当城市列表有选项时，而不是仅仅调用

$('.chosen-select').chosen();

添加城市后，触发更新事件：

$('#ctid').trigger("chosen:updated");

请看下面的演示。

//track whether options have been added to the list 
var cityOptionsAdded = false;

function setCountry() {
  var conval = document.getElementById('conid');
  var selectVal = '';
  if (conval.selectedIndex == -1) {
    return null;
  } else {
    selectVal = conval.options[conval.selectedIndex].text;
    $("#popupcountry").removeClass("in");
  }
  $('#borderCon').css('border', '');
  var url = conval.options[conval.selectedIndex].value + ".json";
  $.post(url, function(obj) {
    var ctData = '';
    $('#ctid').find('option').not(':first').remove();
    $('#ctid').removeClass('chosen-select');
    chosenSelect = $('.chosen-select').chosen();
    if (obj.isData == 1) {
      ctData = obj.cid;
      $.each(ctData, function(idx, o) {

        $("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
      });
      if (cityOptionsAdded) { //subsequent addition of cities to list
        $('#ctid').trigger("chosen:updated");
      } else { //first time adding cities to list
        cityOptionsAdded = true;
        $('#ctid').addClass('chosen-select');
        chosenSelect = $('.chosen-select').chosen();
      }
    }
  });
}
/**override jQuery ajax for this sandbox
  because real AJAX requests are disabled 
  in this environment
*/
$.post = function(url, callback) {
  var data;
  if ($('#conid').val() == 'CA') {
    data = {
      "isData": true,
      "cid": [{
        "city_id": "OT",
        "city_name": "Ottowa"
      }, {
        "city_id": "VA",
        "city_name": "Vancouver"
      }]
    };
  }
  if ($('#conid').val() == 'SE') {
    data = {
      "isData": true,
      "cid": [{
        "city_id": "ST",
        "city_name": "Stockholm"
      }, {
        "city_id": "LU",
        "city_name": "Lund"
      }]
    };
  }
  callback(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" />
<div class="popover-content">
  <p>
    <select class="chosen-select text-left" style="width:100%;" onchange="setCountry()" id="conid">
        <option value="" selected>Select Country</option>
        <option value="CA">Canada</option>
        <option value="SE">Sweden</option>
      </select>
  </p>
</div>
<div id="popupcity" class="popover" style="width:270px">
  <div class="arrow"></div>
  <h3 class="popover-title">Select City</h3>
  <div class="popover-content" id="ctchoosen">
    <p>
      <select class="text-left" style="width:100%;" id="ctid">
          <option value="" selected>Select City</option>
        </select>
    </p>
  </div>
</div>

---

¹_{https://harvesthq.github.io/chosen/#change-update-events}