0

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

<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中显示该类别的每个建议标签。我还希望能够选择多个类别，所以如果我选择两个类别，我希望同时显示建议的标签。

有人有时间帮忙吗？

4

2 回答 2

3

是的，首先将一个事件绑定到选择标签，并根据该值，显示列表。同时删除 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>");
     });
   });
});
于 2012-07-30T19:30:46.617 回答
1

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

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 提供的解决方案，否则使用它，它可以解决您在问题中提出的问题。

于 2012-07-30T19:50:07.203 回答