JQueryを選択しても検索ボックスが表示されませんでしたか？

Question

ドロップダウンを使用する必要があるフィールドが少ないフォームがあります。私は各選択タグにクラスを作成しました。このクラスは、各要素にselectedを適用するために使用されます。フォームがロードされても選択されてもエラーは出ません。ものだけを画面上に表示されていることはこれです：

選ばれている画像：ここでhttps://i.stack.imgur.com/TQEK5.png

が私のコードです：ここでは

<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout"> 
    <fieldset> 
    <legend>Demographic</legend> 
     <div class="formItem"> 
      <label for="city" class="required">City:</label> 
      <select name="city" id="city" class="chosen"> 
       <option value="">Choose City</option> 
       <cfoutput query="getCity"> 
        <option value="#cityNum#">#cityName#</option> 
       </cfoutput> 
      </select> 
     </div> 
     <div class="formItem"> 
      <p align="center"><input type="button" name="chSubmit" id="chSubmit" value="Submit"></p> 
     </div> 
    </fieldset> 
</form> 

はjQueryのです：

$(document).ready(function() { 
    $('.chosen').each(function(){ 
     $(this).chosen(); 
    }); 
}); 

Answer 1

は参照されてはいけません次のように設定してください。

負荷CSS -> jQuery -> chosen

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" /> 
<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> 

$(document).ready(function() { 
 
    $('.chosen').each(function() { 
 
    $(this).chosen(); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" /> 
 
<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> 
 

 
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout"> 
 
    <fieldset> 
 
    <legend>Demographic</legend> 
 
    <div class="formItem"> 
 
     <label for="city" class="required">City:</label> 
 
     <select name="city" id="city" class="chosen"> 
 
     <option value="">Choose City</option> 
 
     <cfoutput query="getCity"> 
 
      <option value="#cityNum#">#cityName#</option> 
 
     </cfoutput> 
 
     </select> 
 
    </div> 
 
    <div class="formItem"> 
 
     <p align="center"> 
 
     <input type="button" name="chSubmit" id="chSubmit" value="Submit"> 
 
     </p> 
 
    </div> 
 
    </fieldset> 
 
</form>