Javascript 如何在表格元素中选择当前选定的下拉选项_Javascript_Jquery_Html

Javascript 如何在表格元素中选择当前选定的下拉选项

javascript jquery html

Javascript 如何在表格元素中选择当前选定的下拉选项,javascript,jquery,html,Javascript,Jquery,Html,//在一行的每个下拉列表中选择当前td元素时，我想禁用相应的输入td元素但这段代码只适用于第一个下拉列表 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <script>

//在一行的每个下拉列表中选择当前td元素时，我想禁用相应的输入td元素但这段代码只适用于第一个下拉列表

     <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        </head>
        <script>
        $( document ).ready(function() {
        $("#d1").bind('change',function(){

        if($(this).closest('tr').find('#d1').val() == 'saab'){

        $("#d2").attr('disabled', 'disabled').val('');
            } 
        else{
        $("#d2").removeAttr('disabled');
        }  
        });
        });
        </script>
        </head>
        <body>
        <h1>Cab</h1>
        <table border="0">
            <tr>
                <td class="select">Online Password (Repeated)&nbsp; </td>
                <td><select name="D1" id="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select></td>
              <td >
            <input type="text" value="" id="d2">
<!-- above is the input textbox i want to disable-->
          </td>
            </tr><tr>
                <td class="select">Online Password (Repeated)&nbsp; </td>
                <td><select name="D1" id="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select></td>
              <td >
            <input type="text" value="" id="d2">
          </td>
            </tr>
            <tr>
                <td class="select">Online Password (Repeated)&nbsp; </td>
                <td><select name="D1" id="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select></td>
              <td>
            <input type="text" value="" id="d2">
          </td>
            </tr>
           <tr>

          </tr>
        </table>


        </body>
        </html>


$（文档）.ready（函数（）{
$（“#d1”）.bind（'change'，function（）{
if（$（this）.closest（'tr'）.find（'#d1'）.val（）=='saab'）{
$（“#d2”）.attr（'disabled'、'disabled'）.val（''）；
} 
否则{
$（“#d2”）.removeAttr（'disabled'）；
}  
});
});
驾驶室
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪

//我编写的函数仅适用于第一个td元素，在选择第二个下拉列表td时，函数调用本身不会发生。

代码中没有什么问题

1:HTML具有重复的id元素，这使得HTML无效

2：您正在使用id选择器附加事件，如果要将事件绑定到单个元素，则应执行此操作

3：用于查找同一行中的输入的选择器再次出错

请尝试下面的代码

我已将html中的id属性更改为类，并更改了查找select旁边的输入元素的逻辑


$（文档）.ready（函数（）{
$（“.d1”）.on（'change'，function（）{
var context=（$（this.parents（“tr”））；
if（$（this）.val（）=='saab'）{
$（.d2），context.attr（'disabled'，'disabled'）.val（''；
}否则{
$（“.d2”，context）.removeAttr（'disabled'）；
}
});
});
驾驶室
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪

对于类似的内容，您应该使用

类
我已删除重复的ID
，并添加了类的名称选项

$（文档）.ready（函数（）{
$（“.options”）.bind（'change'，function（）{
if（$（this）.val（）=='saab'）{
$（this）.closest（'tr'）.find（'input'）.attr（'disabled'，'disabled'）.val（''）；
}否则{
$（this）.closest（'tr'）.find（'input'）.removeAttr（'disabled'）；
}
});
});

在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
在线密码（重复）
沃尔沃汽车
萨博
梅赛德斯
奥迪
ID
应该是唯一的，也许为此使用类会更好？在选择相应的tr td下拉列表时，我想禁用相同的tr td输入元素，但此代码仅适用于第一个tr td select下拉列表，即函数调用仅对第一个使用相同id的tr td select下拉列表执行一次，因为这些下拉列表是一个具有硬编码id的字符串，这与所有下拉列表相同。@vijayram您今年不应该有多个相同id元素违反HTML规范。不要使用ID
作为选择器，请使用类，就像我在下面的回答中所做的那样，但我建议您找到一种方法来替换那些ID
，使其具有唯一性。如果您计划将它们作为提交的目标，那么如果您不使用类
来补偿那些ID
，您可能会发现更多的问题。谢谢您的回答，但非常感谢您的更正me@vijayramNP很乐意帮忙：）@Deep以秒数击败我：p@NewToJS是的，我的可能早50秒：）非常感谢，这就是俯瞰世界时发生的事情basics@vijayram没问题。如果您有任何问题，请随时提问，我将乐意尽我所能提供帮助。@vijayram由于您的评论“下拉列表以硬编码字符串的形式出现”，我添加了第二种方法。