使用另一个阵列的数组值

Question

我希望用户从第一个下拉列表中选择“省/州”，然后查看该省/州的指定区域，但我想在第二个列表中添加“其他”下拉列表中未列出的区域，但如果用户选择“其他”，我希望输入框显示。

我对js很陌生，遇到了一个我无法修复的小问题。对不起，如果它被问到，但我试图找到一个类似的问题没有成功。我也无法在jsfiddle上获得这个工作，所以我为这篇长文章道歉。

大多数的选项被禁用（仍在进展中的工作）

我有什么，我想在这里做一个工作示例：

请看片段。

function filterDropDownLists(provinces, cityfilter) { 
 
     var city1= new Array('Please Select Area','Example 1', 'Example 2', 'Example 3'); 
 
     
 
/*values for second dropdown*/ 
 

 
/*if one of these optios are selected, display specified array above*/ 
 
     switch (provinces.value) { 
 
      case 'Gauteng': 
 
       cityfilter.options.length = 0; 
 
       for (i = 0; i < city1.length; i++) { 
 
        createOption(cityfilter, city1[i], city1[i]); 
 
       } 
 
       break; 
 

 
      default: 
 
       cityfilter.options.length = 1;     
 
     } 
 

 
    } 
 

 
function createOption(provincefilter, text, value) { /*add the values to the next dropdown */ 
 
     var opt = document.createElement('option'); 
 
     opt.value = value; 
 
     opt.text = text; 
 
     provincefilter.options.add(opt); 
 
    } 
 

 
\t 
 
\t

<select class="provincefilter" id="provincefilter" onchange="filterDropDownLists(this,document.getElementById('cityfilter'))"> 
 
\t \t \t \t <option value="selectprovince" selected>Please Select Province</option> 
 
\t \t \t \t <option value="Gauteng">Gauteng</option> 
 

 
\t \t \t </select> 
 

 

 
\t \t \t <select class="cityfilter" id="cityfilter"> <!--second dropdown to list specified array--> 
 
\t \t \t \t <option value="selectarea" selected>Please Select Area</option> 
 
\t \t \t 
 
\t \t \t </select>

但我具有的问题在于一个使用数组插入值。 我想要的是人在第一个选择的东西，然后它显示某些值为第二，但第二个有'其他'的选项，我想添加一个输入框旁边的情况下'其他”选择

问题：

function filterDropDownLists_rblock(provinces, cityfilter) { \t \t 
 
\t \t var gauteng = new Array('Please Select Area','Pretoria East', 'Pretoria North', 'Pretoria Central', 'Johannesburg', 'Midrand', 'Centurion','Other'); 
 
     var easterncape = new Array('Please Select Area','Port Elizabeth', 'Durban','Other'); 
 
\t \t var freestate = new Array('Please Select Area','Louis Trichardt','Other'); 
 
\t \t 
 
\t \t 
 

 
     switch (provinces.value) { 
 
      case 'Gauteng': 
 
       cityfilter.options.length = 0; 
 
       for (i = 0; i < gauteng.length; i++) { 
 
        createOption(cityfilter, gauteng[i], gauteng[i]); 
 
       } 
 
       break; 
 
      default: 
 
       cityfilter.options.length = 1;     
 
     } 
 

 
    } 
 

 
function createOption(provincefilter, text, value) { 
 
     var opt = document.createElement('option'); 
 
     opt.value = value; 
 
     opt.text = text; 
 
     provincefilter.options.add(opt); 
 
    } 
 

 
function city_other_select(otherCitySelect) 
 
{ 
 
    if(otherCitySelect){ 
 
     otherCityOptionValue = document.getElementById("city_option_other").value; 
 
     if(otherCityOptionValue == otherCitySelect.value){ 
 
      document.getElementById("rblock_area_other").style.display = "inline-block"; 
 
     } 
 
     else{ 
 
      document.getElementById("rblock_area_other").style.display = "none"; 
 
     } 
 
    } 
 
    else{ 
 
     document.getElementById("rblock_area_other").style.display = "none"; 
 
    } 
 
}

<div class="rblock_business_area"> 
 
\t \t \t <select class="rblock_provincefilter" id="rblock_provincefilter" onchange="filterDropDownLists_rblock(this,document.getElementById('rblock_cityfilter'))"> 
 
\t \t \t \t <option value="selectprovince" selected>Please Select Province</option> 
 
\t \t \t \t <option value="Gauteng">Gauteng</option> 
 
\t \t \t </select> 
 

 
\t \t \t <select class="rblock_cityfilter" id="rblock_cityfilter" onchange="city_other_select(this)"> 
 
\t \t \t \t <option value="rblock_selectarea" selected>Please Select Area</option> 
 
\t \t \t \t <option value="city_option_other" id="city_option_other">Other</option> 
 
\t \t \t </select> 
 
    
 
\t \t \t <div class="rblock_area_other" style="display:none;"> 
 
\t \t \t \t <input type=text name=areaother size="30px" placeholder="Please specify"/> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

我想你可能会对这得到一个“更清晰的运行”如果你将你的数据从表示层分离出来，并且只需要逻辑工作。所以我创建了一个具有province和area属性的对象。

事件处理程序然后只需要清除，过滤和填充各种<select>元素。

试试这个：

var data = [ 
 
    {"province": "Gauteng", "area": "Pretoria East"}, 
 
    {"province": "Gauteng", "area": "Pretoria North"}, 
 
    {"province": "Gauteng", "area": "Pretoria Central"}, 
 
    {"province": "Gauteng", "area": "Johannesburg"}, 
 
    {"province": "Gauteng", "area": "Midrand"}, 
 
    {"province": "Gauteng", "area": "Centurion"}, 
 
    {"province": "Sydney", "area": "Surry Hills"}, 
 
    {"province": "Sydney", "area": "Redfern"}, 
 
    {"province": "Sydney", "area": "Bondi"} 
 
]; 
 

 
$('#provinceFilter').append('<option selected>Please select province</option>'); 
 
$('#areaFilter').append('<option selected>Please select area</option>'); 
 
$('#otherSelection').hide(); 
 

 
var provinces = []; 
 
$.each(data, function(index, item) { 
 
    if (provinces.indexOf(item.province) < 0) { 
 
    provinces.push(item.province); 
 
    }; 
 
}); 
 

 
$.each(provinces, function(index, item) { 
 
    $('#provinceFilter').append('<option value=' + item + '>' + item + '</option>'); 
 
}); 
 

 
$('#provinceFilter').on('change', function() { 
 
    $('#areaFilter').empty(); 
 
    var areas = []; 
 
    $.each(data, function(index, item) { 
 
    if (areas.indexOf(item.area) < 0 && $('#provinceFilter').val() == item.province) { 
 
     areas.push(item.area); 
 
    }; 
 
    }); 
 
    $.each(areas, function(index, item) { 
 
    $('#areaFilter').append('<option value=' + item + '>' + item + '</option>'); 
 
    }); 
 
    $('#areaFilter').append('<option value=Other>Other</option>'); 
 
}); 
 

 
$('#areaFilter').on('change', function() { 
 
    var area = $('#areaFilter').val(); 
 
    if (area == 'Other') { 
 
    $('#otherSelection').show(); 
 
    $('#otherSelection').val('Which area?'); 
 
    $('#otherSelection').focus(); 
 
    } else { 
 
    $('#otherSelection').hide(); 
 
    $('#otherSelection').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <select id="provinceFilter"> 
 
    </select> 
 
    <select id="areaFilter"> 
 
    </select> 
 
    <input id="otherSelection" /> 
 
</div>

Answer 2

您需要定义上select和变更确认为other变化事件，并显示input元素。

对于先用hide添加input如下，

<input type="text" id="otherInput" name="other" class="hide"/> 

而且在选择添加change事件如下，

cityfilter.addEventListener('change', function(){ 

     if(cityfilter.value == "other") 
     { 
      document.getElementById("otherInput").className = ""; 
     } 
    });