CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menuhtml-select
Jaison Brooks
Jaison Brooks

Reputation: 5826

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

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

Upvotes: 0

Views: 825

Answers (1)

Ringo
Ringo

Reputation: 5473

$(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.

Upvotes: 2

Related Questions