'How to get the selected values of multiple chosen dropdowns

I am adding on the fly multiple jquery chosen dropdowns with multiple attribute to true. How do I get the options of the selected dropdowns? End user will choose value from one state dropdown only

My HTML Code:

<div class="hide state" id="State-1">
<select name='state' id="state-1" multiple="" class="chosen-select choice stateOption" data-placeholder="Choose a State...">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
</div>

<div class="hide state" id="State-2">
<select name='state' id="state-2" multiple="" class="chosen-select choice stateOption" data-placeholder="Choose a State...">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
</div>

and my JS code is as:

jQuery(function($) {
  $(".chosen-select").chosen();
  $('.choice').on('change' , function(e, info){

    var stateVal = $(".stateOption").chosen().find("option:selected");  //console.log(stateVal);

    if(stateVal !== null) {
        $.each(stateVal, function(index){
            data.state.push($(this).val()); //console.log($(this).val());
        });
    }

  });
})

here is a fiddle with the provided code

jqueryselectedjquery-chosen


Solution 1:[1]

To begin, having multiple selects with the same name attribute isn't a good practice. If we remove Javascript from this discussion, those elements are going to naturally conflict with one another during a normal form submission, and in that scenario, the form is going to obey the last element with the same name attribute, regardless is what is hidden or not.

Second, if you don't need a select menu which supports multiple selections, there's no need for the multiple attribute. Just an aside there.

Now to the real problem - you have nothing to identify what dropdown is currently being displayed. Honestly, I have no idea how the browser would be showing anything right now, especially with both divs containing that hide class.

Putting all that aside, I think your best bet would be this: use a fuzzy selector and utilize the visible selector. It would look something like this:

<select name="state-1">
<select name="state-2">

$("select[name^=state]:visible").val();

This selector will find the select item which has a name that begins with "state" and is visible. You avoid the conflict for normal form submission, and, to I think one of your bigger problems, we use val() to obtain the current value. That's all you'll need.

One more point, I notice you have data-placeholder="Choose a state", which, unless you have some Javascript doing some (unnecessary) fancy action there, won't work. Instead, I would recommend prepending this option to your select:

<option value="">Select your state...</option>

Being at the top of the options list will mean that it's automatically selected on page load, and with an empty value, it means the text "Select your state..." won't be sent as the value, and you can check for an empty string for validation.

Solution 2:[2]

Try this, Save values in two arrays :

$(function () {
    var foo = [];
    $('#state-1').on('change', function (e) {
        console.clear()
        $('#state-1 :selected').each(function (i, selected) {
            foo[i] = $(selected).text();
        });
        console.log(foo);
    });
    var foo2 = [];
    $('#state-2').on('change', function (e) {
        console.clear()
        $('#state-2 :selected').each(function (i, selected) {
            foo2[i] = $(selected).text();
        });
        console.log(foo2);
    });

})

http://jsfiddle.net/2BQe7/2/

Solution 3:[3]

I was tackling a submenu that works depending on the main menu value. I added from one of the posts here :selected to my jquery and it worked.

const sub_category = $('.subcategorymenu :selected').val();

if (sub_category.value !== 'Choose a Category') {
 alert("sub");
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James Lai
Solution 2
Solution 3 Spinstaz

Related Questions