Show input field only if a specific option is selected in multiple select

Question

I have a multiselect box like the example below

<select name="geolocation_country[]" class="form-control form-control-chosen" id="geolocation_country" data-placeholder="Please select..." multiple>
                                <option  value="AF">Afghanistan</option>
                                <option  value="IN">India</option>
                                <option  value="DZ">Algeria</option>
                                <option  value="DS">American Samoa</option>
                                <option  value="AD">Andorra</option>
                                <option  value="AO">Angola</option>
                                <option  value="AI">Anguilla</option>
                                <option  value="AQ">Antarctica</option>
                                <option  value="AG">Antigua and Barbuda</option>
                                <option  value="AR">Argentina</option>
                                <option  value="AM">Armenia</option>
                                <option  value="AW">Aruba</option>
                                <option  value="AU">Australia</option>
                                <option  value="AT">Austria</option>
                                <option  value="AZ">Azerbaijan</option>
                                <option  value="BS">Bahamas</option>
</select>

Now, if I select India along with someother countries, I need another multiple select for indian states shown

<div id="show_geolocation_region">
<select name="geolocation_region[]" class="form-control form-control-chosen" id="geolocation_region" data-placeholder="Please select..." multiple>
            <option selected value="no">Target all states of India</option>
                                <option  value="1">Andaman & Nicobar Islands</option>
                                <option  value="2">Andhra Pradesh</option>
                                <option  value="3">Arunachal Pradesh</option>
                                <option  value="4">Assam</option>
</select>
</div>

I created a js for normal select :

$("#geolocation_country").on('change', function() {
    if(this.value == "IN") {
        alert('India clicked');
        $("#show_geolocation_region").show();           
    } else  {
        $("#show_geolocation_region").hide();           
    }

});

If I select India alone, then the states select box shows. But If I select India along with other countries, the states search box disappears. Is it possible to create a JS where you show states box for india if india is selected in country? Regardless of other countries selected or not.

score 3 · Accepted Answer · answered Oct 16 '18 at 06:31

3

Use jQuery's .val() to get all selected values instead of DOM's plain .value.

Then apply the array methods .includes or .indexOf to check whether the value "IN" has been selected.

answered Oct 16 '18 at 06:31

Hero Wanders

3,237
1
10
14

So replace `this.value == "IN"` for `$(this).val().indexOf("IN") > 0` – David Oct 16 '18 at 06:36
Can you please modify the js code to make this answer a bit more elaborate? – Yaseen Hussain Oct 16 '18 at 06:36
Umm. That didn't work for me. Nothing happens if I select India. – Yaseen Hussain Oct 16 '18 at 06:42
1

@David: it should be `.indexOf("IN") >= 0` – Hero Wanders Oct 16 '18 at 22:12
Working jsfiddle: https://jsfiddle.net/028gfwk5/ – joshv2 Dec 05 '22 at 17:39

score 0 · Answer 2 · answered Oct 16 '18 at 06:35

Use onchange="showSelectedValues(this);" on selector elment id="geolocation_country"

Then use this:

function showSelectedValues(self){
  let selectedValues = Array.from(self.selectedOptions)
    .map(option => option.value);
  console.log(selectedValues);      
}

It will give you values in array on that you can loop over and put your condtion for hide and show.

score 0 · Answer 3 · answered Oct 16 '18 at 07:00

I think it is better to have array of countries objects with their states, does not matter you get these values from AJAX request or create statically. and on select create new select and append selected element into $('#show_geolocation_region') or whatever. Please Check this link :):

var countries = [
  {
    name: 'Afghanistan',
    value: 'AF',
    states: [
      {
        name: 'State 1',
        value: 1
      },
      {
        name: 'State 2',
        value: 2
      },
      {
        name: 'State 3',
        value: 3
      }
    ]
  },
  {
    name: 'India',
    value: 'IN',
    states: [
      {
        name: 'Andaman & Nicobar Islands',
        value: 1
      },
      {
        name: 'Andhra Pradesh',
        value: 2
      },
      {
        name: 'Arunachal Pradesh',
        value: 3
      },
      {
        name: 'Assam',
        value: 4
      }
    ]
  }
];

Your HTML:

<select name="geolocation_country[]" class="form-control form-control-chosen" id="geolocation_country" data-placeholder="Please select..." multiple>
</select>
<div id="show_geolocation_region">
</div>

Your JQUery:

$(document).ready(function(){
  var select = $("#geolocation_country");
  countries.forEach(function(country){
    var option = $('<option/>');
    option.attr({ 'value': country.value }).text(country.name);
    select.append(option);
  })
});

$("#geolocation_country").on('change', function() {
  var selectedValue = $(this).val();
  $('#show_geolocation_region').html('');
  selectedValue.forEach(function(countryValue){
    var sel = $('<select>').appendTo('#show_geolocation_region');
    sel.attr('multiple', true);
    sel.attr('name', 'geolocation_region_'+countryValue);
    sel.attr('id', 'statesSelect');
    sel.attr('class', 'form-control form-control-chosen');
    var selectedCountry = countries.find(function(country){
      return country.value = countryValue;
    });
    selectedCountry.states.forEach(function(state){
      sel.append($("<option>").attr('value',state.value).text(state.name));
    })

  });
});

score 0 · Answer 4 · answered May 08 '22 at 04:46

$("#geolocation_country").on('change', function() {
    if($(this).value == "IN") {  //Change here
        alert('India clicked');
        $("#show_geolocation_region").show();           
    } else  {
        $("#show_geolocation_region").hide();           
    }

});

Show input field only if a specific option is selected in multiple select

4 Answers4