Question

我正在根据类别创建标签建议功能。所以，我有一个带有一堆类别的选择框，当我选择一个类别时，我想在列表中显示子类别（显然使用数组）。这就是我现在所拥有的：

<select id="categorySelect">
   <option value="6">Animal</option> //the value here is the category id
   <option value="12">Music</option>
</select>

<ul id="suggestedTags">
</ul>

我的JSON数组：

var tagsMakers= [
   { category: 'Animal', suggestedTags: [
        { name: 'cat'},
        { name: 'dog' },
        { name: 'rabbit'}
 ]},

 { category: 'Music', suggestedTags: [
        { name: 'rock' },
        { name: 'rap' }
   ]}
];

$("#categorySelect").change(function(){

});

我还在学习数组操作，我不知道从哪里开始！

用语言来说，逻辑是：

当我选择一个类别时，我想在下面的 li 中显示该类别的每个建议标签。我也希望能够选择多个类别，所以如果我选择两个类别，我想要显示两者的建议标签。

任何人都有一点时间帮忙吗？

Answer 1

是的，首先将事件绑定到select标记，然后根据该值显示列表。还要删除JSON结构，然后构建一个哈希：

tagMakers = {'Animal': ['Cat','Dog','Rabbit'], 'Music': ['rock','rap']}
$("#categorySelect").change(function() {
   $("#suggestedTags").empty();
   $(this).find(":selected").each(function() {
   var selected = $(this).text();
   $.each(tagMakers[selected].function(i,n) {
     $("#suggestedTags").append("<li>"+n+"</li>");
     });
   });
});

Answer 2

您的代码数组没有类别ID，因此我将在此处使用类别名称。但是，作为一种好的做法，如果将类别ID放在categories数组中会更好。更好的是，如果您使用对象哈希而不是数组。

function getCategoryByName(name){
    //search in array.
    for(var i = 0, len = tagsMakers.length; i < len; i++)
    {
        if (tagsMakers[i].category === name)
        {
            // found.
            return tagsMakers[i];
        }
    }    
    // do not exists
    return;
}

$("#categorySelect").change(function(){
    // get the selected value 
    var current = $(this).val(), 
        suggestedTags = $("#suggestedTags"),
        category;

    // we do not have the category id on 'tagsMakers', so
    // we need the category name. 
    current = $("option[value="+current+"]", this).text();

    //search in array.
    category = getCategoryByName(current);

    //populate the suggested tags
    suggestedTags.empty()
    $.each(category.suggestedTags, function(i, tag) {
        $("<li>" + tag.name + "</li>").appendTo(suggestedTags);
    });
});

jsFiddle：http://jsfiddle.net/vcZnu/

编辑：如果您可以通过对象哈希（更好）更改您的类别数组，那么您可以使用@CupidVogel提供的解决方案，否则请使用此解决方案，以解决您在问题

Jquery - 选择框中的数组操作

2 个答案: