仅当在多选中选择了特定选项时才显示输入字段

Question

我有一个多选框，如下例所示

<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>

现在，如果我选择印度和其他国家/地区，我需要对显示的印度州进行另一个多项选择

<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>

我为普通选择创建了一个 js：

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

});

如果我单独选择印度，则会显示州选择框。但是如果我选择印度和其他国家，州搜索框就会消失。 如果在国家/地区选择印度，是否可以创建一个 JS，在其中显示印度的状态框？无论是否选择了其他国家/地区。

Answer 1

使用 jQuery 的 .val() 到 get all selected values 而不是 DOM 的普通 .value。

然后应用数组方法.includes或.indexOf来检查值"IN"是否被选中。

Answer 2

在选择器 elment id="geolocation_country" 上使用 onchange="showSelectedValues(this);"

然后使用这个：

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

它将为您提供数组中的值，您可以循环并设置隐藏和显示的条件。

Answer 3

我认为最好将countries 对象的数组与它们的states 结合起来，无论您是从AJAX 请求中获取这些值还是静态创建这些值。并在选择上创建新选择并将所选元素附加到$('#show_geolocation_region') 或其他任何内容中。请检查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
      }
    ]
  }
];

您的 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>

你的查询：

$(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));
    })

  });
});

Answer 4

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

});