Question

我有一个带有两个下拉菜单的表单，我希望第二个下拉菜单中的可选值根据第一个下拉菜单中选择的内容进行更改

这是下拉：

<select name="cat" id="1">
   <option>MAMMAL</option>
   <option>REPTILE</option>
   <option>BIRD</option>
</select>

根据选择，我立即想要显示以下表格之一：

<select name="type" id="type1">
   <option>CAT</option>
   <option>DOG</option>
</select

<select name="type" id="type1">
   <option>SNAKE</option>
   <option>LIZARD</option>
</select

<select name="type" id="type1">
   <option>HEN</option>
   <option>ROBIN</option>
</select

表单用于多个条目，因此每次都会有许多行ID值增加。到目前为止我的jQuery是：

$(document).ready(function()
{
   $(".cat").live("click", function(event)
   {      
     cid=event.target.id;
     catchosen = event.target.value;

     switch (catchosen)
     {
        case 'MAMMAL':
        case 'REPTILE':
        case 'BIRD':
        return {}
     };
     event.preventDefault();
  });  
});

如何使用jQuery更改/替换下拉列表中的值？

Answer 1

首先，如果您使用选择器$(".cat")，则应该在第一个选择框中分配类cat。但在这种情况下使用id选择总是好的。我建议你使用change事件代替click事件来检测第一个选择框的select选项的更改。

您可以使用.empty() jquery功能清除第二个下拉选项，然后使用.append()为其添加新选项。

像

这样的东西

$("#type1").empty(); //clear all options
$("#type1").append('<option value="CAT">CAT</option>');

Answer 2

为您选择单独的ID。即type1，type2和type3。像这样更改你的脚本。

$(document).ready(function()
{
   $(".cat").live("click", function(event)
   {
     catchosen = this.value;
     $("#type1, #type2, #type3").hide();
     switch (catchosen)
     {
        case 'MAMMAL':
            $("#type1").show();
            break;
        case 'REPTILE':
            $("#type2").show();
            break;
        case 'BIRD':
            $("#type3").show();
            break;
     };
  });  
});

根据JS / Jquery中的其他下拉列表更改FORM SELECT（下拉菜单）

2 个答案: