jquery get select options to array

Question

I'm kind of stuck with one - presumably simple to resolve problem.

I want to create the code which will be used for all select elements on the site.

Depending on the "label" attribute assigned to the "option" I want to hide all other "div" elements which have classes the same as other "label" values of the "options" in this specific "select" menu.

Let me demonstrate:

<select class="sel_depend" id="reg_where_heard" name="where_heard">
    <option value="">Select one…</option>
    <option value="1">Google</option>
    <option value="2">Yahoo</option>
    <option value="3" label="where_heard_magazine">Magazine</option>
    <option value="4" label="where_heard_other">Other</option>
</select>

<div class="where_heard_magazine dn">
    <input type="text" name="magazine" id="magazine" value="" />
</div>
<div class="where_heard_other dn">
    <input type="text" name="other" id="other" value="" />
</div>

Now - "dn" class in the div under the menu has simply "display:none" assigned.

Depending on the selected option - if it's value is 3 - I want the div with the class the same as the label to show - then if I select option with value 4 - all other divs (where class names would be populated from all options of this select element) should hide() and only selected show().

I'm not quite sure how to put all "option" elements of the specific "select" element to array. Then presumably I could loop through it using each() statement and find out whether they have "label" and if so - hide the element with the class matching its value.

then after the loop I could show the element with the class which matches the value of the "label" parameter of the selected "option".

Any idea how to achieve this?

Patricia · Accepted Answer · 2010-07-29 19:12:43Z

2

give all the divs related to a specific select a class that is the name of that element. then you can do something like:

$('.sel_depend').change(function(){
    var class = $(this).attr('name');
    $('.' + class).hide();
    var divToShowClass = $(this).find(':selected').attr('label');
    $('.' + divtoShowClass).show();

});

answered Jul 29, 2010 at 19:12

Patricia

7,8024 gold badges40 silver badges70 bronze badges

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

3 Comments

Patricia Over a year ago

glad i could help! if you don't mind, mark this as the answer, so the question won't show up in the un-answered list :)

user398341 Over a year ago

Sure - no problem - where is the button to mark it as answered?

Patricia Over a year ago

there should be a checkmark beside the answer. click on it :)

Marimuthu Madasamy · Accepted Answer · 2010-07-29 19:31:12Z

0

  $('.sel_depend').change(function() {
    var optionWithLabels = $('.sel_depend').children("option[label]");
    if($("option:selected", this).attr('label')) {
        optionWithLabels.each(function(){
            $('.' + $(this).attr('label')).hide();
        });
        $('.' + $("option:selected", this).attr('label')).show();
    }
  });

answered Jul 29, 2010 at 19:31

Marimuthu Madasamy

13.6k4 gold badges33 silver badges53 bronze badges

3 Comments

user398341 Over a year ago

I've tried this - however, because not all of the options have label assigned (only those which need additional textfield) they don't close the fields when different one is chosen after initial show().

Marimuthu Madasamy Over a year ago

Do you want to hide all the divs when the options without label attribute are chosen?

user398341 Over a year ago

all divs which refer to this specific menu - yes.

Collectives™ on Stack Overflow

jquery get select options to array

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related