Creating multiple Select options from an Object

Question

Im stack on creating multiple select options

I have an Object with multi objects inside and want create select options in condition of the previous select option , i provide js fiddle for better understanding .

my objectif is

first select category ----(then)---> select sex -----(then)---> select kind---(then)-->then select size

by this order from that Object.

i could do the select sex and it works but not kind and size.

this is my html

 <form name="myform"> <div> <select name="category_group" id="category_group" > <option value="0">choose category</option> <option value='401' > clothes </option> <option value='403' > shoes </option> </select> </div> <br> <div> <select id="clothing_sex" name="clothing_sex" onChange="showclothesKind(this.value,this.form.clothing_kind)"> <option value="0">choose Type»</option> </select> <select id="clothing_kind" name="clothing_kind"> <option value="0">choose clothes</option> </select> <select id="clothing_size" name="clothing_size"> <option value="0">choose size</option> </select> </div> </form>

and js in the fiddle.

much appreciate your help.

bowheart · Accepted Answer · 2014-09-11 16:37:23Z

This was kind of fun to play around with. Thanks for posting. I used the following:

var optionTemplate = "<option class='newOption'>sampleText</option>"; $(document).ready(function() { var removeFromNextSelects = function(firstSelector) { var selNum = sels.indexOf(firstSelector); for (var i = selNum; i < sels.length; i++) { $(sels[i]).find('.option').remove(); } }; var populateNextSelect = function(neededObject, targetSelector) { removeFromNextSelects(targetSelector); for (var key in neededObject) { var name; neededObject[key].name ? name = neededObject[key].name : name = neededObject[key]; $(targetSelector).append(optionTemplate); $('.newOption').val(key).html(name).removeClass('newOption').addClass('option'); } }; var obj1 = {}, obj2 = {}, obj3 = {}; var sels = ["#clothing_sex", "#clothing_kind", "#clothing_size"]; $('#category_group').change(function() { if ($(this).val() == 0) { removeFromNextSelects(sels[0]); return; } obj1 = {}; var selection = $(this).val(); obj1 = clothes[selection]; populateNextSelect(obj1, sels[0]); }); $('#clothing_sex').change(function() { if ($(this).val() == 0) { removeFromNextSelects(sels[1]); return; } obj2 = {}; var selection = $(this).val(); obj2 = obj1[selection].types; populateNextSelect(obj2, sels[1]); }); $('#clothing_kind').change(function() { if ($(this).val() == 0) { removeFromNextSelects(sels[2]); return; } obj3 = {}; var selection = $(this).val(); var arr = obj2[selection].sizes; for (var i = 0; i < arr.length; i++) { obj3[Object.keys(arr[i])[0]] = arr[i][Object.keys(arr[i])[0]]; } populateNextSelect(obj3, sels[2]); }); });

Here's the fiddle

Looks you are near of it , but it repeats the selected values. if you select other thing , the previous values stays selected.
You are right, so sorry. I've updated the code, and the fiddle.
Just want understand this if it needed ? <option class='newOption'>sampleText</option .
Yeah, it's the template that I stick in and modify to create each option in the next dropdown. You could also do this by creating a hidden element (say a <script> with type="text/template") in the html and then grabbing it with jQuery's .html() function, but I found this way easier.
Sorry I have other thing to say, look in the your fiddle and choose type lets say (woman) then select none in it again (dont select) it will show error obj1[selection] is undefined . it happen same thing on other selctions . How can i fix this Please?

Collectives™ on Stack Overflow

Creating multiple Select options from an Object

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related