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

1

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

edited Sep 11, 2014 at 16:37

answered Sep 10, 2014 at 4:43

bowheart

4,6862 gold badges31 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Karim Daraf Over a year ago

Looks you are near of it , but it repeats the selected values. if you select other thing , the previous values stays selected.

bowheart Over a year ago

You are right, so sorry. I've updated the code, and the fiddle.

Karim Daraf Over a year ago

Just want understand this if it needed ? <option class='newOption'>sampleText</option .

bowheart Over a year ago

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.

Karim Daraf Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related