Question

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

我正在尝试填写一个国家/地区下拉列表，其中州选项会根据您选择的国家/地区而变化。但是，如果没有选择国家，我希望州选择框说“请选择一个国家”。现在它只是说“状态”。

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

我所拥有的简单例子

国家＆lt; .select id =“country”name =“country”＆gt;

州＆lt; .select id =“state”name =“state”＆gt;

我是一个没有经验的程序员，所以我不确定可以使用哪些功能。这是用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建议的那样，您可以在选择国家/地区时填写“州”选项。

对于默认情况下的“请选择国家/地区”，或者未选择任何国家/地区：

<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

根据另一个选择框

我所拥有的简单例子

2 个答案: