如何使用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

選擇提供了可以觸發的事件。 從文檔中 ：

• 動態更新選擇

  如果您需要更新選擇字段中的選項，並希望選擇來接收更改，則需要在該字段上觸發“ selected：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}