Chosen.js的樣式下拉菜單html

我有javascript來創建另一個菜單的onchange事件的下拉菜單。我的第一個菜單是Chosen.js風格，工作正常，我的第二個菜單沒有得到它應該樣式。我曾嘗試使用"以防我需要使用雙引號而不是單引號，這打破了第二個下拉菜單，我不明白爲什麼。Chosen.js的樣式下拉菜單html

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Operations</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link rel="stylesheet" type="text/css" href="docsupport/style.css"> 
 
    <link rel="stylesheet" type="text/css" href="docsupport/prism.css"> 
 
    <link rel="stylesheet" type="text/css" href="chosen.css"> 
 
</head> 
 
<body class="back3"> 
 
     <select id="zone" select data-placeholder="Choose a Zone..." class="chosen-select" style="width:450px;"> 
 
      <option value=""></option> 
 
      <option value="North America">North America</option> 
 
      <option value="Europe">Europe</option> 
 
      <option value="Asia">Asia</option> 
 
      <option value="North Africa">North Africa</option> 
 
     </select> 
 

 
    <div id="country"> 
 
    </div> 
 

 
     <script src="jquery.min.js" type="text/javascript"></script> 
 
     <script src="chosen.jquery.js" type="text/javascript"></script> 
 
     <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script> 
 
     <script type="text/javascript"> 
 
      var config = { 
 
       '.chosen-select': {disable_search: true}, 
 
       '.chosen-select-deselect': { allow_single_deselect: true }, 
 
       '.chosen-select-no-single': { disable_search_threshold: 10 }, 
 
       '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, 
 
       '.chosen-select-width': { width: "100%" } 
 
       
 
      } 
 
      for (var selector in config) { 
 
       $(selector).chosen(config[selector]); 
 
      } 
 
      $('#zone').change(function() { 
 
       $('#country').html("<select id='first_selected' select data-placeholder='Choose a Country...' class='chosen-select' style='width:450px;'></select>"); 
 
       for (var i = 0; i < $(this).val().length; i++) { 
 
        $('#first_selected').append('<option value="' + $(this).val()[i] + '">' + $(this).val()[i] + '</option>'); 
 
       } 
 
      }) 
 
     </script> 
 

 
</body> 
 
</html>

來源

2015-05-18 metalayer

$(this).val()會寫信保存從第一個菜單中選擇的值，因此下面的代碼將iteretate過它，上書：

for (var i = 0; i < $(this).val().length; i++) { 
    $('#first_selected').append('<option value="' + $(this).val()[i] + '">' + $(this).val()[i] + '</option>'); 
}

我已創建一個fiddle， mybe它會幫助你（請注意，小提琴沒有參考選擇的插件庫）。

來源

2015-05-18 18:01:33 TeoMor

Chosen.js的樣式下拉菜單html

回答

相關問題