How to get values from conditional drop down list?

Question

I am seeking assistance again for my problem. This is just a continuation of my conditional dropdownlist.

<select name="dropdownmain" id="" title="">
    <option value="dropdownmain1">dropdownmain1</option>
    <option value="dropdownmain2">dropdownmain2</option>
    <option value="dropdownmain3">dropdownmain3</option>
    <option value="dropdownmain4">dropdownmain4</option>
</select>



//if selected dropdownmain1 this dropdown will display
<select name="dropdownmain1" id="" title="">
    <option value="dropdownmain1-submenu1">dropdownmain1-submenu1</option>
    <option value="dropdownmain1-submenu2">dropdownmain1-submenu2</option>
    <option value="dropdownmain1-submenu3">dropdownmain1-submenu3</option>
    <option value="dropdownmain1-submenu4">dropdownmain1-submenu4</option>
</select>

//if selected dropdownmain2 this dropdown will display
<select name="dropdownmain2" id="" title="">
    <option value="dropdownmain2-submenu1">dropdownmain2-submenu1</option>
    <option value="dropdownmain2-submenu2">dropdownmain2-submenu2</option>
    <option value="dropdownmain2-submenu3">dropdownmain2-submenu3</option>
    <option value="dropdownmain2-submenu4">dropdownmain2-submenu4</option>
</select>

//if selected dropdownmain3 this dropdown will display
<select name="dropdownmain3" id="" title="">
    <option value="dropdownmain3-submenu1">dropdownmain3-submenu1</option>
    <option value="dropdownmain3-submenu2">dropdownmain3-submenu2</option>
    <option value="dropdownmain3-submenu3">dropdownmain3-submenu3</option>
    <option value="dropdownmain3-submenu4">dropdownmain3-submenu4</option>
</select>

//if selected dropdownmain4 this dropdown will display
<select name="dropdownmain4" id="" title="">
    <option value="dropdownmain4-submenu1">dropdownmain4-submenu1</option>
    <option value="dropdownmain4-submenu2">dropdownmain4-submenu2</option>
    <option value="dropdownmain4-submenu3">dropdownmain4-submenu3</option>
    <option value="dropdownmain4-submenu4">dropdownmain4-submenu4</option>
</select>

**im using this js code**

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
$('select[name="dropdownmain"]').change(function(){
    $('select[name!="dropdownmain"]').hide();
    $('select[name="' + $(this).val() + '"]').show();
});
});//]]>  

</script>

How will I get the value of the selected dropdownlist when a button is clicked?

Answer 1

Something like this maybe (if I understood what you want):

$("#button").click(function() {
    var selected = $('select[name="dropdownmain"]').val();
    alert($('select[name="' + selected + '"]').val());
});

Answer 2

$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').val()

Answer 3

Use:

var e = document.getElementsByName("dropdownmain")[0];
var strUser = e.options[e.selectedIndex].value;

Answer 4

If you want to get all values from currently displayed select :

 $("select:visible").each(function() {
    console.log( $(this).attr('name') + " have value : " +   $(this).val() );               
  });

Here is a working example : http://jsfiddle.net/GAe7D/1/

Answer 5

Give the submenus a common class name! , and give the main select an ID as well!

jQuery code can be reduced to:

$('#dropdownmain').change(function() {
    $('.submenu').hide();
    $('.submenu[name="' + $(this).val() + '"]').show();
});

http://jsfiddle.net/samliew/jKUBb/

Then to get the value of selected submenu item:

$('.submenu').change(function() {
    alert($(this).val());
});