Question

I’m creating a tag suggestions function, depending of a category. So, I have a select box with a bunch of categories, when I select a category, I want to display the sub-categories (using an array obviously) in a list. Here’s what I have now:

<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>

my JSON array:

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

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

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

});

I’m still learning array manipulations, and I don’t know where to start!

In words the logic is:

When I select a category, I want to display every suggested tags for that category in the li below. I also want to be able to chose multiple categories, so if I select both categories, I want the suggested tags for both to show.

Anyone have a little time to help?

Answer 1

Yeah, first bind an event to the select tag, and based on the value, display the list. Also remove the JSON structure, and build a hash instead:

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>");
     });
   });
});