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

到目前为止，我一直有类似的事情

<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>

选择一个城市
伦敦
曼彻斯特

---

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

如果您还没有使用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);
});

---

如果您还没有使用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);
});

---

这完全取决于您如何存储值以及您使用的javascript框架。这是非常简单和纯粹的javascript实现

var c1=[“城市1-1”、“城市1-2”]；
变量c2=[“城市2-1”，“城市2-2”]；
var x=[c1，c2]；
函数OnCountry已更改{
var cities=document.getElementById（“城市”）；
如果（s.值>0）{
var v=“”；
对于（var i=0；i

选择国家
国家1
国家2

这完全取决于如何存储值以及使用的javascript框架。这是非常简单和纯粹的javascript实现

var c1=[“城市1-1”、“城市1-2”]；
变量c2=[“城市2-1”，“城市2-2”]；
var x=[c1，c2]；
函数OnCountry已更改{
var cities=document.getElementById（“城市”）；
如果（s.值>0）{
var v=“”；
对于（var i=0；i

选择国家
国家1
国家2

var国家=[]；
国家[“德国”]=“慕尼黑”、“柏林”、“斯图加特”]；
国家[“英格兰”]=“伦敦”、“曼彻斯特”、“利物浦”]；
document.querySelector（“选择[name='country']”）。addEventListener（“更改”，函数（）{
var element=countries[this.value.toString（）.toLowerCase（）]；
if（元素）
{
//克隆：
var select=document.querySelector（“select[name='city']”）。cloneNode（）；
var节点=document.createElement（“选项”）；
node.value=0；
node.setAttribute（“已禁用”，true）；
node.setAttribute（“选定”，true）；
node.textContent=“选择一个城市”；
选择.appendChild（节点）；
countries[this.value.toString（）.toLowerCase（）].forEach（函数（元素）{
var节点=document.createElement（“选项”）；
node.value=元素；
node.textContent=元素；
选择.appendChild（节点）；
});
document.querySelector（“选择[name='city']”）.parentElement.replaceChild（选择，document.querySelector（“选择[name='city']））；
}
}，假）

选择一个国家
德国
英格兰

var国家=[]；
国家[“德国”]=“慕尼黑”、“柏林”、“斯图加特”]；
国家[“英格兰”]=“伦敦”、“曼彻斯特”、“利物浦”]；
document.querySelector（“选择[name='country']”）。addEventListener（“更改”，函数（）{
var element=countries[this.value.toString（）.toLowerCase（）]；
if（元素）
{
//克隆：
var select=document.querySelector（“select[name='city']”）。cloneNode（）；
var节点=document.createElement（“选项”）；
node.value=0；
node.setAttribute（“已禁用”，true）；
node.setAttribute（“选定”，true）；
node.textContent=“选择一个城市”；
选择.appendChild（节点）；
countries[this.value.toString（）.toLowerCase（）].forEach（函数（元素）{
var节点=document.createElement（“选项”）；
node.value=元素；
node.textContent=元素；
选择.appendChild（节点）；
});
document.querySelector（“选择[name='city']”）.parentElement.replaceChild（选择，document.querySelector（“选择[name='city']））；
}
}，假）

选择一个国家
德国
英格兰
您可以使用hierarchy select plugin等：
您可以使用hierarchy select plugin等：
另一种不使用jQuery的方式，使用数据属性：


var countrySelect=document.querySelector（“[name=country]”）；
var cityOptions=document.querySelectorAll（'选项[数据国家]）；
countrySelect.addEventListener（'change'，function（）{
对于（变量i=0；i

选择一个国家
德国
英格兰
选择一个城市
伦敦
曼彻斯特
斯图加德
门兴
不使用jQuery的另一种方式，使用数据属性：


var countrySelect=document.querySelector（“[name=country]”）；
var cityOptions=document.querySelectorAll（'选项[数据国家]）；
countrySelect.addEventListener（'change'，function（）{
对于（变量i=0；i

选择一个国家
德国
英格兰
选择一个城市
伦敦
曼彻斯特
斯图加德
门兴
我找到了一个解决方案，虽然没有得到很好的优化，但它可以工作：

$（文档）.ready（函数（）{
$（“#国家”）。更改（功能（）{