Issues getting values from multiple <select>/<option>

Question

Im having issues with the following code. Im simply trying to get the values from whatever is selected from my layout_select2 options.

Currently when selection multi_select and then a option from layout_select2 i end up with the first value from layout_select1 due to the way i load the url. I need a suggestion on how to fix this or reference either of my <select> object's

See Demo

Html

<select id='multi_select' name='multi_select'>
    <option value='bing.com'>Bing.com</option>
    <option value='Google.com'>Google.com</option>
</select>
<select name='layout_select' id='layout_select1'>
    <option value='/images/search?q=windowsphone'>Windows Phone - Images</option>
    <option value='/search?q=android'>Android - Search</option>
</select>
<select name='layout_select2' id='layout_select2'>
    <option value='/search?q=Windows'>Windows - Images</option>
    <option value='/images/search?q=Robots'>Robots - Search</option>
</select>
<input type='button' id='button' value='Click Me' />

JavaScript

$(document).ready(function () {

$('#button').click(function () {
    var url = 'http://www.' + $('#multi_select').val() + $('#layout_select1').val();
    window.location = url;
});

$('#layout_select1').show();
$('#layout_select2').hide();

$('#multi_select').change(function () {
    if ($('#multi_select option:selected').text() == "Bing.com") {
        $('#layout_select1').fadeIn('slow');
    }
    if ($('#multi_select option:selected').text() == "Google.com") {
        $('#layout_select1').hide();
        $('#layout_select2').fadeIn('slow');

    } else {
        $('#layout_select1').fadeOut('slow');
    }
   });

  });

Perhaps, I have misunderstood your question, but I don't see layout_select2 being used in the formation of the url. — Harry
– Harry, Commented Aug 27, 2013 at 3:08
@Harry I need to know how to reference either layout_select [1] or [2] and load based on the selection — Jaison Brooks
– Jaison Brooks, Commented Aug 27, 2013 at 3:09
Is there a chance that both select1 and select2 will have a value at the same time? As per demo, it can. In such cases what is the expectation? — Harry
– Harry, Commented Aug 27, 2013 at 3:11
@Harry So basically my end result is to make a full search URL. starting with http://www. + Value of 'multi_select' + values of either layout_select1 or layout_select2 depending on which values they selected in multi-select — Jaison Brooks
– Jaison Brooks, Commented Aug 27, 2013 at 3:17

Divey · Accepted Answer · 2013-08-27 03:26:02Z

2

You can filter the layout_select elements to use the value of the visible select like this:

$('#layout_select1, #layout_select2').filter(':visible').val();

When you combine this with a couple tweaks to your fiddle, it works pretty well:

$(document).ready(function () {
    $('#button').click(function () {
        var url = 'http://www.' + $('#multi_select').val() + $('#layout_select1, #layout_select2').filter(':visible').val();
        window.location = url;
    });

    $('#layout_select1').show();
    $('#layout_select2').hide();

    $('#multi_select').change(function () {
        if ($('#multi_select option:selected').text() == "Bing.com") {
            $('#layout_select1').fadeIn('slow');
            $('#layout_select2').hide();
        } else {
            $('#layout_select2').fadeIn('slow');
            $('#layout_select1').hide();
        }
    });
});

answered Aug 27, 2013 at 3:26

Divey

1,7291 gold badge13 silver badges23 bronze badges

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

1 Comment

Jaison Brooks Over a year ago

@Harry Thank you for helping me get pretty much the entire way

Collectives™ on Stack Overflow

Issues getting values from multiple <select>/<option>

Html

JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Html

JavaScript

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related