用 jQuery 建立一个列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5735861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
build a list with jQuery
提问by santa
I have a drop-down menu:
我有一个下拉菜单：
<select id="mySelect">
<option> select
<option value="fruits"> fruits
<option value="flowers"> flowers
</select>
When I select one of the options I need to build an un-ordered list from an array that I have:
当我选择其中一个选项时，我需要从我拥有的数组中构建一个无序列表：
var myFruits = ["apple","orange","banana"];
var myFlowers= ["rose","tulip","carnation"];
... and have the option become a header of the list, something like:
...并让该选项成为列表的标题，例如：
<ul>fruits
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
I also need to allow to have multiple select, i.e. User can select both options from the drop-down. I'm trying to use jQuery but have not gone too far:
我还需要允许有多个选择，即用户可以从下拉列表中选择两个选项。我正在尝试使用 jQuery，但还没有走得太远：
$("#mySelect").click(function() {
if($(this).val() == "fruits") {
$("#myResults").append("<ul>"+$(this).val()+"</ul>");
}
});
回答by Chandu
Try this(I have used change event, you can easily change it to use click event if you think you need to handle click function for sure):
试试这个（我已经使用了更改事件，如果您认为确实需要处理点击功能，您可以轻松地将其更改为使用点击事件）：
$("#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");
}
}
});
For a more generic solution:
对于更通用的解决方案：
<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>
回答by ataddeini
You might be able to use a jQuery template to help out with this as well. For example, this would render the items in the list for you.
您也可以使用 jQuery 模板来帮助解决这个问题。例如，这将为您呈现列表中的项目。
EditI modified this to also use an attribute on the selected option to identify which data source to use.
编辑我修改了这个，也使用所选选项上的属性来标识要使用的数据源。
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'ssome more information on templates.
回答by McHerbie
In my opinion, from the understanding on your question is that your desired function would look like this: http://jsfiddle.net/czAHJ/
在我看来，从对你的问题的理解来看，你想要的功能应该是这样的：http: //jsfiddle.net/czAHJ/
To explain things a bit more, take a look at the code...
为了进一步解释事情，请看一下代码...
The HTML is simple, just the drop down and the results container:
HTML 很简单，只有下拉菜单和结果容器：
<select id="mySelect">
<option>select</option>
<option value="fruits"> fruits</option>
<option value="flowers"> flowers</option>
</select>
<div id="myResults"></div>
Then the Javascript/jQuery code to add the functionality:
然后添加功能的 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);
}
});
});
Let me know if this is the answer that you are looking for. I've tried to optimize the code as much as possible to keep things fast and light. (Best Practice)
让我知道这是否是您正在寻找的答案。我试图尽可能地优化代码，以保持快速和轻便。（最佳实践）
Cheers!
干杯!
