建立與jQuery

Question

列表我有一個下拉菜單：

<select id="mySelect"> 
    <option> select 
    <option value="fruits"> fruits 
    <option value="flowers"> flowers 
</select> 

當我選擇的，我需要從一個陣列建立一個未排序列表中的選項，我有一個：

var myFruits = ["apple","orange","banana"]; 
var myFlowers= ["rose","tulip","carnation"]; 

...並可以選擇成爲列表的標題，是這樣的：

<ul>fruits 
    <li>apple</li> 
    <li>orange</li> 
    <li>banana</li> 
</ul> 

我還需要允許有多個選擇，即用戶可以從下拉列表中選擇兩個選項。我試圖使用jQuery，但太遠沒有去：

$("#mySelect").click(function() { 
    if($(this).val() == "fruits") { 
     $("#myResults").append("<ul>"+$(this).val()+"</ul>"); 
    } 
}); 

Answer 1

試試這個（我用的變化情況下，您可以輕鬆地改變它使用click事件，如果你認爲你需要處理的點擊功能肯定）：

$("#mySelect").change(function() { 
       if($(this).val() == "fruits") { 
        var fruitsListHTML = ""; 
        if($("#myResults").data("fruits") != "1"){ 
         $.each(myFruits, function(a, b){ 
          fruitsListHTML += "<li>" + b + "</li>"; 
         }); 
         $("#myResults").append("<ul>"+ fruitsListHTML +"</ul>"); 
         $("#myResults").data("fruits", "1"); 
        } 
       } 
      }); 

對於一個更通用的解決方案：

<select id="mySelect" multiple> 
     <option> select </option> 
     <option value="fruits"> fruits 
     <option value="flowers"> flowers 
    </select> 
    <div id="myResults"></div> 
    <input type="text"/> 
    <script type="text/javascript">  
     var optionsList = { 
      fruits: ["apple","orange","banana"], 
      flowers: ["rose","tulip","carnation"] 
     }; 

     $(function() { 
     $("#mySelect").change(function() { 
       var options = $(this).val(); 
       $.each(options, function(i,e){ 
        if($("#myResults").data(e) != "1"){ 
         var listHTML = ""; 
         $.each(optionsList[e], function(a, b){ 
          listHTML += "<li>" + b + "</li>"; 
         }); 
         $("#myResults").append("<ul>"+ listHTML +"</ul>"); 
         $("#myResults").data(e, "1"); 
        } 
       }); 
      }); 
     }); 
    </script> 

Answer 2

你也許能夠使用jQuery的模板，以幫助這個爲好。例如，這會爲您列出列表中的項目。

編輯 我修改了這個選項，也使用選定選項上的屬性來標識要使用哪個數據源。

var myFruits = [ 
    { Name: 'apple' }, 
    { Name: 'orange' }, 
    { Name: 'banana' } 
]; 

var myFlowers = [ 
    { Name: 'rose' }, 
    { Name: 'tulip' }, 
    { Name: 'carnation' } 
]; 

$(function() { 
    $('#mySelect').change(function() { 
     var option = $('#mySelect option:selected');     
     var data = eval((option).attr('data-source')); 
     $.tmpl('<li>${Name}</li>', data).appendTo('#tmpl-cont'); 
    }); 
}); 

<select id="mySelect"> 
    <option> select 
    <option data-source="myFruits" value="fruits"> fruits 
    <option data-source="myFlowers" value="flowers"> flowers 
</select> 

<ul id="tmpl-cont" /> 

Here's有關模板的更多信息。

Answer 3

在我看來，從你的問題的理解是，你需要的功能應該是這樣的：http://jsfiddle.net/czAHJ/

要解釋的東西多一點，看看代碼...

的HTML很簡單，只需下拉，結果容器：

<select id="mySelect"> 
    <option>select</option> 
    <option value="fruits"> fruits</option> 
    <option value="flowers"> flowers</option> 
</select> 
<div id="myResults"></div> 

然後使用Javascript/jQuery代碼添加的功能：

// wrap code in $(document).ready(), unless 
// you are certain that script is loaded after DOM 
$(document).ready(function() { 

    var myFruits = ["apple","orange","banana"]; 
    var myFlowers= ["rose","tulip","carnation"]; 

    // use bind() as it's faster than click(), 
    // also fire on 'change' instead 
    $('#mySelect').bind('change', function() { 

     // get value of the select to get our list 
     // we dont need any jquery (bit faster) 
     var list = false; 
     if (this.value == 'fruits') { 
      // use fruits 
      list = myFruits; 
     } else if (this.value == 'flowers') { 
      // use flowers 
      list = myFlowers; 
     } else { 
      // unknown, just ignore.. 
      // lets clear the result container.. 
      // or you can do something else: alert('Unknown Option'); 
      $('#myResults').html(''); 
      return false; 
     } 

     // require list 
     if (list) { 

      // collect html, use an array 
      // its faster than concating to a string 
      var html = []; 

      // build html list from array (loop *could* be faster...) 
      var len = list.length; 
      for (var i = 0; i < len; i++) { 
       // add our string to the html array using .push 
       html.push('<li>' + list[i] + '</li>'); 
      } 

      // put our array of html back into a string 
      // also, wrap it in a <ul> 
      html = '<ul>' + html.join('') + '</ul>'; 

      // write html list to results, replacing old content 
      $('#myResults').html(html); 

     } 

    }); 


}); 

讓我知道這是否是您正在尋找的答案。我試圖儘可能優化代碼以保持快速和輕鬆。 （Best Practice）

乾杯！