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

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>

我为常规select创建了一个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()来获取所有选定的值，而不是DOM的普通.value 。

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

Answer 2

使用onchange="showSelectedValues(this);" 在选择器元素id =“ geolocation_country”上

然后使用：

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

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

Answer 3

我觉得这是更好地有阵countries有自己的对象states ，无所谓你从AJAX请求这些值或创建静态。 然后在select上创建新的select并将所选元素附加到$('#show_geolocation_region')或其他内容中。 请检查此链接 :)：

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>

您的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));
    })

  });
});