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的普通$cordovaSQLite.execute(db, "SELECT * FROM token").then(function (res) { console.log(res); }, function (error) { ErrorHandler.handle(error); });。

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

Answer 2

在选择器元素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请求中获取这些值或静态创建它们。然后在select上创建新的select并将所选元素附加到$('#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>

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

  });
});

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

3 个答案: