Question

到目前为止我有这样的事情。

<form> 
       <select name='country'>
            <option value='0'>Select one country</option>
            <option value='germany'>Germany</option>
            <option value='england'>England</option>
       </select>
       <select name='city'>
            <option value=''>Select one city</option>
            <option value='stuttgart'>Stuttgard</option>
            <option value='munchen'>Munchen</option>
       </select>
       <input type='submit' name='submit' value='Search'>
</form>

我想要的是：当有人选择像德国这样的国家时，下一个选项价值应该是德国城市。但是，如果我选择英格兰，我想修改下一个选项值和文本，以便在英语城市中使用这样的内容：

     <select name='city'>
            <option value=''>Select one city</option>
            <option value='london'>London</option>
            <option value='manchester'>Manchester</option>
     </select>

我不知道如何做到这一点，请通知我或重定向到一些在线的stufs或教程，我不想要你的所有代码，但我不知道。谢谢！

Answer 1

如果你还没有使用jQuery，你可能应该像这样的任务变得更容易。你想做这样的事情：

$("select[name='country']").on("change",function(){
    var currentValue = $(this).val();
    var options = "";
    //switch on currentValue and build options string
    $("select[name='city']").html(options);
});

Answer 2

这在很大程度上取决于您如何存储值以及您正在使用的javascript框架。这是非常简单和纯粹的JavaScript实现。

var c1 = ["City 1-1", "City 1-2"];
var c2 = ["City 2-1", "City 2-2"];
var x = [c1, c2];

function onCountryChanged(s) {
  var cities = document.getElementById("city");
  if (s.value > 0) {
    
    var v = "";
    for (var i = 0; i < x[s.value - 1].length; i++) {
      v += "<option value='" + x[s.value - 1][i] + "'>" + x[s.value - 1][i] + "</option>"
    }
    cities.innerHTML = v;
  } else {
    cities.innerHTML = "";
    }
}

<select onchange="onCountryChanged(this)">
  <option value="0">Select Country</option>
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
</select>

<select id="city">
</select>

Answer 3

	var countries = [];
	countries['germany'] = ["München", "Berlin", "Stuttgart"];
	countries['england'] = ["London", "Manchester", "Liverpool"];
	
	document.querySelector("select[name='country']").addEventListener("change", function(){
		var element = countries[this.value.toString().toLowerCase()];
		if (element)
		{
			//clone:
			var select = document.querySelector("select[name='city']").cloneNode();
			var node = document.createElement("option");
			node.value = 0;
			node.setAttribute("disabled", true);
			node.setAttribute("selected", true);
			node.textContent = "Select a city";
			select.appendChild(node);
			countries[this.value.toString().toLowerCase()].forEach(function(element){
				var node = document.createElement("option");
				node.value = element;
				node.textContent = element;	
				select.appendChild(node);				
			});
			
			document.querySelector("select[name='city']").parentElement.replaceChild(select, document.querySelector("select[name='city']"));
		}
	}, false);

<form> 
       <select name='country'>
            <option value='0'>Select one country</option>
            <option value='germany'>Germany</option>
            <option value='england'>England</option>
       </select>
       <select name='city'>
       </select>
       <input type='submit' name='submit' value='Search'>
</form>

我会这样做。我希望你能看到它的作用。

创建包含城市的数组。
当更改国家/地区选择的值时，将触发事件更改。
如果值与countries数组中的项匹配，则继续。
迭代所有值并将它们附加到克隆的选择中。
将旧选择替换为新选择。

我正在克隆旧的select，所以我们可以在内存中添加节点，然后立即替换整个select。这可以防止浏览器在每次添加新选项时重新绘制，从而节省资源。

Answer 4

没有jQuery的另一种方法，使用数据属性：

＆＃13;

var countrySelect = document.querySelector('[name=country]');
var cityOptions = document.querySelectorAll('option[data-country]');

countrySelect.addEventListener('change', function(){
    for (var i = 0; i < cityOptions.length; i++){
      var opt = cityOptions[i];
      opt.style.display = (opt.getAttribute('data-country') === this.value) ? '' : 'none';           
    }
}, false);

＆＃13;

<select name='country'>
  <option value='0'>Select one country</option>
  <option value='germany'>Germany</option>
  <option value='england'>England</option>
</select>
<select name='city'>
  <option value=''>Select one city</option>  
  <option data-country="england" value='london'>London</option>
  <option data-country="england" value='manchester'>Manchester</option>
  <option data-country="germany" value='stuttgart'>Stuttgard</option>
  <option data-country="germany" value='munchen'>Munchen</option>
</select>

＆＃13;

Answer 5

你可以使用层次结构选择插件等：jquery-select-hierarchy

Answer 6

我找到了一个解决方案，但效果并不是很好，但它有效：http://jsfiddle.net/YPsqQ/772/

$(document).ready(function() {

$("#country").change(function() {
    var val = $(this).val();
    if (val == "1") {
        $("#city").html("<option value='berlin'>Berlin</option><option value='munchen'>Munchen</option>");
    } else if (val == "2") {
        $("#city").html("<option value='london'>London</option><option value='manchester'>Manchester</option>");

    } 
});

单击时更改表单选择选项并选择其他选项

6 个答案: