2016-05-20 11 views
3

私は選択されたドロップダウンを使用して、オプションを動的に入力しています。テキストを入力することはできませんが、ドロップダウンの検索は機能しませんが、ドロップダウンオプションが静的な場合は正常に動作しています。助けてください。動的に入力されたオプションで選択されたドロップダウン検索が機能しない

<select id="test" class="chosen-select"> 
    <option>Select1</option> 
</select> 

var div2=[]; 
div2.push("<option value='1'>ALL1</option>"); 
div2.push("<option value='2'>ALL2</option>"); 
div2.push("<option value='3'>ALL3</option>"); 
div2.push("<option value='4'>ALL4</option>"); 
div2.push("<option value='5'>ALL5</option>"); 
$("#test").html(div2.join('')); 

$("#test").trigger("chosen:updated"); 
+0

するvar DIV2 = []; div2.push( "<オプション値= '1'> ALL1");div2.push( "<オプション値= '2'> ALL2"); div2.push( "<オプション値= '3'> ALL3");div2.push( "<オプション値= '4'> ALL4");div2.push( "<オプション値= '5'> ALL5"); $( "#test").html(div2.join( '')); $( "#test")。trigger( "selected:updated"); – Sridhar

答えて

3

ドロップダウンリストに動的に値を入力した後は、必ず.chosen()に電話してください。ここで

はフィドルhttps://jsfiddle.net/npzs2bt7/

EDIT 1:あなたがtrigger("chosen:updated")を呼び出すことができる前に

おそらくあなたは、ドロップダウンにchosen()を呼び出していませんでした。

更新フィドルhttps://jsfiddle.net/npzs2bt7/1/

EDIT 2:Jquery 1.9.0を使用して

Chosen.Jquery 1.1.0

コピーは、このhtmlファイル(chosentest.html)に変換し、それを試してみてください。

<html> 
    <head> 
     <title>chosen demo</title> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css"> 
     <style type="text/css"> 
      #test 
      { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <select id="test" class="chosen-select"> 
      <option>Select1</option> 
     </select> 
     <button class="btn">Click to see selected value</button> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       //first call chosen() 
       $("#test").chosen(); 

       var div2=[]; 
       div2.push("<option value='1'>ALL1</option>"); 
       div2.push("<option value='2'>ALL2</option>"); 
       div2.push("<option value='3'>ALL3</option>"); 
       div2.push("<option value='4'>ALL4</option>"); 
       div2.push("<option value='5'>ALL5</option>"); 
       $("#test").html(div2.join('')); 

       //this will bind the updates 
       $("#test").trigger("chosen:updated"); 

       //text button to alert selected value from dropdown 
       $(".btn").click(function(){ 
        alert($("#test").val()); 
       }); 
      }); 
     </script> 
    </body> 
</html> 
+0

私は.chosen()を呼び出そうとしましたが、運はありません。 – Sridhar

+0

ここに私のサンプルコード は するvar DIV2 = []; div2.push( "<オプション値= '1'> ALL1");div2.push( "<オプション値= '2'> ALL2"); div2.push( "<オプション値= '3'> ALL3");div2.push( "<オプション値= '4'> ALL4");div2.push( "<オプション値= '5'> ALL5"); $( "#test").html(div2.join( '')); $( "#test")。trigger( "selected:updated"); – Sridhar

+0

ちょっと@Sridharうまく動作します。あなたのコメントに基づいて、私はフィドルを更新しました。更新された答えを確認してください。 –

関連する問題