javascript - 将数组的值用于另一个数组

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

	
	

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

			</select>


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

但是我遇到的问题是使用数组来插入值。我想要的是让这个人在第一个中选择一些东西，然后它为第二个显示某些值，但是对于第二个有一个“其他”选项，我想在它旁边添加一个输入框以防“其他” '被选中

问题:

function filterDropDownLists_rblock(provinces, cityfilter) {		
		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');
		var freestate = new Array('Please Select Area','Louis Trichardt','Other');
		
		

        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"> 
			<select class="rblock_provincefilter" id="rblock_provincefilter" onchange="filterDropDownLists_rblock(this,document.getElementById('rblock_cityfilter'))">
				<option value="selectprovince" selected>Please Select Province</option>  
				<option value="Gauteng">Gauteng</option>
			</select>

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