Using values within multiple <option>'s inside two dropdown selectors

Question

having issue with my TWO dropdowns, not displaying the specific values based on the selection of the first box. Currently all values display regardless of which first option is selected.

I am currently using Jquery 1.6 with the actual code. See Demo here

Here is a example of my HTML.

<select name="column_select" id="column_select">
<option id="1" value="/search_option_1">First</option>
<option id="2" value="/search_option_2">Second</option>
<option id="3" value="/search_option_3">Third</option>
</select>

<select name="layout_select" id="layout_select">

<!-- Child options from Parent Option 1 -->
<option id="1" value="/first_value/one">1.1</option>
<option id="1" value="/first_value/two">1.2</option>

<!-- Child options from Parent Option 2 -->
<option id="2" value="/second_value/one">2.1</option>
<option id="2" value="/second_value/two">2.2</option>

<!-- Child options from Parent Option 3 -->
<option id="3" value="/third_value/one">3.1</option>
<option id="3" value="/third_value/two">3.2</option>
</select>

Now as you can see im using the id="" to be able to reference which options go with which first selection box. Im doing this because i need to specify specific values for each option. See the demo code for more insight and what im trying to accomplish.

Thanks

ID's must be unique, or else the HTML won't be valid, FYI :D — tymeJV
– tymeJV, Commented Aug 26, 2013 at 22:03
@tymeJV Yeah i know this, im just unsure how to link these options with the right parent option. and still have different values for each option. — Jaison Brooks
– Jaison Brooks, Commented Aug 26, 2013 at 22:09
You can always use an instance of this, however both of your selects have ID's, so I believe @Ringo's answer will work just fine. — tymeJV
– tymeJV, Commented Aug 26, 2013 at 22:15
I realize now what you might be trying to do is show different options in the second select box depending on which option is selected in the first select box. Is this true? — Ringo
– Ringo, Commented Aug 26, 2013 at 22:33

Ringo · Accepted Answer · 2013-08-26 22:04:57Z

2

$(document).ready(function() {
    $('#multi_select').click(function() {
      var url = 'http://www.urlimusing.com/' + $('#column_select').val() + $('#layout_select').val();
      window.location = url;
    });
});

Everything else in your existing document ready looks weird and bad. Just throw those lines away.

answered Aug 26, 2013 at 22:04

Ringo

5,5333 gold badges35 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Using values within multiple <option>'s inside two dropdown selectors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related