Question

iam正在处理html选择下拉列表，如果我选择＆＃34;不在列表中＃34;然后它应该打开新的文本框。我有两个选择下拉列表，它正在为一个下拉列表工作，而不是另一个下拉列表。请帮忙。这是我的小提琴

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

我使用if($(this).val()

删除了for循环并获取了值

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

Answer 2

由于2选择框，$( "select option:selected")无效。它期待一些独特的东西让它发挥作用。请尝试选择当前选定的值，如：$(this).val()

Answer 3

如果您正在使用：

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

您正在选择任何选择框，而不是专注于一个选择框。因此，如果您在第二个框中有“not in list”，并且您更改了第一个框，则会在第一个框下面输入您的输入框，因为第二个选择为true。

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

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

如果selectbox的值为“Not in list”。你可以制作一个功能，你不需要两个，每个选择框一个。

Answer 4

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

您已为$( "select option:selected").each(function(){使用了#materialName and #Vendor。 DOM会检测两个更改事件中SELECT中找到的第一个DOM的更改。这就是为什么只有一个下拉列表正在工作而其他下拉列表没有。

你应该改变你的两条线

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

和

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

FIDDLE

jquery的下拉问题

4 个答案: