jquery 的下拉问题

Question

我正在处理 html select 下拉菜单，如果我 select "not in list" 那么它应该打开新的文本框。我有两个 select 下拉菜单，它正在为一个下拉菜单工作，而不是为另一个下拉菜单工作。请帮忙。这是我的 fiddle

http://jsfiddle.net/Raghu123/yhovt8pm/

$(document).ready(function(){
     $("#materialName").change(function(){
         $( "select option:selected").each(function(){
             if($(this).attr("value")=="Not in list"){
                   $(".newMaterialName").show();
                   $("#newMaterialName").focus();

             }
             else {
                 $(".newMaterialName").hide();
             }
         });
     }).change();

$("#Vendor").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="Not in listt"){
                $(".newVendor").show();
                $("#newVendor").focus();

            }
            else  {
                $(".newVendor").hide();
            }
        });
    }).change();
});

这里是html

<select class="select-style" id="Vendor" class="form-control" name="Vendor">
    <option value="">---------------------------Select Vendor----------------------------</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="Not in listt">Not in list, enter new vendor</option>
</select>
<div class="newVendor">
    <p class="contact"><label for="name">Enter new Vendor name</label></p>
    <input id="newVendor" name="newVendor" type="text" class="form-control">
</div>

<p class="contact"><label for="name">Material Name</label></p>

<select class="select-style" id="materialName" class="form-control" name="materialName">
    <option value="">---------------------------Select Material Name----------------------------</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="Not in list">Not in list, enter new Material Name</option>
</select>
<div class="newMaterialName">
    <p class="contact"><label for="name">Enter new Material Name</label></p>
    <input id="newMaterialName" name="newMaterialName" type="text" class="form-control">
</div>

Answer 1

这两个选择器无法识别各自的元素是它之前没有工作的原因。

Fiddle

我删除了 for 循环并使用 if($(this).val()

获取值

仅供参考，$( "select#materialName option:selected") 也可以使用，因为它唯一地标识了元素。为了避免循环，我们可以使用 $(this).val().

直接获取元素值

Answer 2

因为 2 select 框，$( "select option:selected") 不工作。它期待一些独特的东西让它发挥作用。请尝试通过选择当前 selected 值来更改，例如：$(this).val()

Answer 3

如果您的工作对象是：

$( "select option:selected").each(function(){

你正在 select 任何 select 盒子，你没有专注于一个。因此，如果您在第二个框处有 "not in list"，并且更改了第一个框，则您的输入框将位于第一个框下方，因为第二个 select 为真。

您不必遍历每个值。你只需要检查

if($(this).val()=="Not in list"){

如果select框的值为"Not in list"。你可以做一个功能，你不需要两个，每个select个盒子一个。

Answer 4

你的一个下拉菜单工作而另一个下拉菜单工作的原因不是因为 dom 被两次使用的相同语句混淆，即：$( "select option:selected").each(function(){

您已将 $( "select option:selected").each(function(){ 用于两个 #materialName and #Vendor。 DOM 确实检测到它在两个更改事件的 DOM 中找到的第一个 SELECT 的更改。这就是为什么只有一个下拉菜单有效而其他无效的原因。

您应该将两行更改为

$("#materialName").change(function(){
   $( "#materialName option:selected").each(function(){

和

$("#Vendor").change(function(){
       $( "#Vendor option:selected").each(function(){

FIDDLE

jquery 的下拉问题

dropdown issue with jquery

javascript

jquery

html

html-select