根据列表中的选择选项刷新下拉列表

我真的需要帮助。我是jQuery的新手，我正尝试刷新dropdown list，或者在选择列表中的某个选项时更改其值。根据列表中的选择选项刷新下拉列表

HTML

<select name="State_locate" class="State"> 
    <option value=" " selected="selected">Select a state</option> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
</select> 
<div id="City_1" class="Alabama"> 
    <select name="City_location[]" class="CityExt"> 
     <option value="Null" selected="selected">Select a city</option> 
     <option value="Avondale">Avondale</option> 
     <option value="Buckeye">Buckeye</option> 
     <option value="Catalina">Catalina</option> 
    </select> 
</div> 
<div id="City_1" class="Alaska"> 
    <select name="City_location[]" class="CityExt"> 
     <option value="Null" selected="selected">Select a city</option> 
     <option value="Lancaster">Lancaster</option> 
     <option value="Soth">Soth</option> 
     <option value="Foothills">Foothills</option> 
    </select> 
</div>

// JavaScript Document 

$("select").bind("change", function() { 

    if ($(this).val() == "AL") { 
     $(".Alabama").slideDown(); 

     $(".Alaska").slideUp(function() { 

      if ($('.Alabama').is(':visible')) { 
       $(".Alaska option[value='Lancaster']").attr('selected', 'selected') 
      } 
     }); 
    } else if ($(this).val() == "AK") { 
     $(".Alaska").slideDown(); 
     $(".Alabama").slideUp(); 
    } 
})

时，被选择的状态正是我试图做的是，那么一个城市的下落。这是完美的。但一旦提交，该城市的价值储存在数组City_location[]。

现在的问题是，如果用户在提交表单之前选择了阿拉斯加的一个城市，然后在阿拉巴马州选择另一个城市，那么最终会有两个城市在阿拉巴马州和阿拉斯加州的阵列中。

我正在寻找一种方法来为阿拉斯加州选择值“空”，如果选择阿拉巴马州。但我的代码不起作用。它只有在值是“Null”时才有效。例如，如果我使用值“兰开斯特”，在jQuery代码

$(".Alaska option[value='Lancaster']").attr('selected', 'selected')

的这一部分它只能一次。如果我做了两次，它不会更新。我怎么解决这个问题。

对不起，长码。谢谢您的帮助。

来源

2013-10-20 Adagoon

你为什么要将它存储在数组中？你选择了多个值吗？ –

我将它存储在数组中，因为如果我不这样做，当我提交我的表单时，我无法检索城市，因为选择具有相同的名称。这只是一个示例代码，我正在为所有50个州做这件事。如果我有他们不同的名字，那么我的代码会更长。 – Adagoon

你可以做这样的事情：

$('.state').on('change',function() { 
    $('.CityExt').val(''); 
}

然后，每当状态选择发生变化时，它会设置这两个城市的价值选择不了了之。

来源

2013-10-20 04:59:10 NicholasJohn16

我试过你的建议，但没有任何成功。我用了一些你的想法以及上面的想法来提出这个代码。 if（$（this）.val（）==“AL”）{（“。Alabama”）。滑下（）; \t \t \t $（”阿拉斯加。 “）效果基本show（函数（）{ 如果（$（” 亚拉巴马：可见的 “）长度）{ $（” 阿拉斯加选项[值= 'Anchoragege'] “）.attr（'selected'，'selected'）; \t} }）; – Adagoon

试试这个：

$(".Alaska option:eq(0)").attr('selected', 'selected')

由于空元素是这将解决您的问题第一个。

来源

2013-10-20 05:04:12

感谢您的及时回应。我尝试了你的建议，没有发生任何事情。 – Adagoon

我觉得上面的解决方案就是你要找的东西。当你选择'.Alabama'时，它会选择类'.alaska'的'null'值。 –

我发现我的问题。除了使用“托”的我用“ATTR”

$(".Alaska option[value='Lancaster']").prop('selected', 'selected');

现在，当其他城市正在提交两次以上之前选择每一次，代码不会只工作一次。

我查了一下意思，但还是不太明白，为什么在jquery中用“prop”代替“attr”。我会继续搜索。感谢所有回复我的人的帮助。

来源

2013-10-20 19:34:58 Adagoon

这是因为你正在使用jquery 1.6+，并且在这里介绍了prop，在http://api.jquery.com/prop/上有更多关于prop的内容。 –

根据列表中的选择选项刷新下拉列表

回答

相关问题