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がないため、ここではカテゴリ名を使用します。ただし、良い習慣として、categories配列にcategoryidを配置することをお勧めします。配列の代わりにオブジェクトハッシュを使用するとさらに良いでしょう。

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 に答える