根据另一个 select 框设置 select 框的默认文本

Question

我对根据另一个 select 框的默认文本设置 select 框的默认文本的能力有疑问。

我正在尝试填充一个国家和州下拉列表，其中的州选项会根据您选择的国家/地区而变化。但是，当没有选择国家时，我希望状态 select 框显示 "Please Choose a Country"。现在它只是说 "State" 否则。

换句话说，如果国家 select 框只说 "Country" 我希望州 select 框说 "Please choose a country"。并且一旦用户在国家select框中选择了一些东西，状态select框就不会再说 "Please choose a country"了。

我所拥有的简单示例

国家/地区<.select id="country" 名称="country">

状态<.selectid="state"名称="state">

我是一个没有经验的程序员，所以我不确定可以使用哪些功能。这会用 jQuery 完成吗？感谢您就此事提供的任何帮助，希望我的问题不会令人困惑。谢谢。

Answer 1

是的，您可以使用 jquery.

轻松完成此操作

查看我创建的 plunker，如下所示

https://plnkr.co/edit/V2VcU20olauex8IBtKC2?p=preview

<select id = "Country" onChange="func()">
  <option value="">Select</option>
  <option value="USA">USA</option>
  </select>
<select id = "State">
  <option value="new">
  Please select the country</option>
  </select>

在脚本文件中。

var func = function(){
var state = {
  'ABC' : 'abc',
  'DEF' : 'def'
}

var sel = $('#State');

$.each(state, function(key, value) { 
    $("#State option[value='new']").remove();
    sel.append('<option value="'+value+'">'+key+'</option>');
});};

Answer 2

正如@guradio 所建议的，您可以在选择国家时填写 "states" 选项。

至于开头默认"Please Choose a Country"，或者没有选择国家时：

<select id="country">
 <option selected>Country</option>
</select>

<select id="state" disabled>
 <option selected disabled>Please provide a Country</option>
</select>

var Country = {
  "Australia" : ["New South Wales","Victoria","Northern Territory","Queensland"],
  "B" : ["1","2","3","4","5","6"],
  "C" : ["1","2","3","4"],
  "D" : ["1","2","3","4", "5"]
}

//Add the countries
$.each(Country, function(key,value) { 
  $("#country").append('<option value="'+key+'">'+key+'</option>');
});

//On country change
$("#country").change(function(){
    //Get country choosen
  var countryChoice = $("#country option:selected").text();

  if (countryChoice !== "Country") {

    $("#state option").remove();

    //Add states from country
    $.each(Country[countryChoice], function(key,value) { 
        $("#state").append('<option value="'+value+'">'+value+'</option>');
    });
    //If new country is valid, enable state choice
    $('#state').prop("disabled", false);
  }
  else {
    //Else, replace selection with "Please provide a state"
    $("#state option").remove();
    $("#state").append('<option selected disabled>Please provide a Country</option>');
    $('#state').prop("disabled", true);
  }
})

这是一个 JsFiddle：DEMO

根据另一个 select 框设置 select 框的默认文本

Setting default text of select box depending on another select box

javascript

jquery

text

default

我所拥有的简单示例