javascript - 根据另一个选择框设置选择框的默认文本

Question

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

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

换句话说，如果国家/地区选择框仅显示“国家/地区”，我希望州/地区选择框显示“请选择一个国家/地区”。一旦用户在国家/地区选择框中选择了某些内容，州/地区选择框就不会再显示“请选择一个国家/地区”。

<小时/>

我所拥有的简单示例

国家<.select id="国家"name ="国家">

州 <.select id="州"name ="州">

我是一个没有经验的程序员，所以我不确定可以使用哪些功能。这可以用 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>');
});};