JQuery显示/隐藏给出奇怪的结果

我有一些奇怪的问题与JavaScript我不能真正解决。我有三个html输入框与一个小的js文件来显示或隐藏第二个和第三个取决于在第一个框中选择什么。我使用这些功能：JQuery显示/隐藏给出奇怪的结果

$('#maintype').on('change', function() { 
    if (this.value == '1') { 
    $("#fries").show(); 
    } else { 
    $("#fries").hide(); 
    } 
});

问题进出口运行到的是，当我强调“薯条”第二个下拉没有显示。第三个输入框从不显示。我尝试了各种解决方案，但我无法弄清楚为什么。

我把我的代码上github

任何人都可以给我在哪里，我错了一些见解？是否有另一种更简单的方法来完成这项工作？

来源

2017-02-09 patrick

你是否认为你可以在你的问题中放置你的html，这样我们就可以看到它。通常不建议链接到github回购。 – DominicValenciana

为什么你有两个不同的document.ready和5'$（＃maintype）.on（change'？ – sTx

如果你能提供一个最小的可执行代码来重现你的问题，那将是很好的。挖掘一些github回购并不是什么SO是 – Aer0

你有两个问题：

到的是，当我强调“薯条”不显示的问题进出口运行第二个下拉

您的薯条检查是错误的，你有：

if (this.value == '1') { 
    $("#fries").show(); 
} else { 
    $("#fries").hide(); 
}

但检查应该为'6'，因为那是你的价值在您的#maintype选择中签名。

另一个问题：

从未显示第三个输入框。

您分配了不同的ID（如#fries，#icecream等）的<div>，而不是到<select>。

在你的情况下，你应该也不会有几个具有相同ID或名称的元素（即#selectlist），这将在你解决第二个问题时得到解决。

来源

2017-02-09 15:28:30 echodrome

是否有可能有没有想过？我使用php从数据库生成列表。 – patrick

<option value="6">fries</option>没有处理程序，我的意思是在您的JavaScript代码中没有if (this.value == '6')类型的行。我在你的js文件的下面添加了行，它工作。

$('#maintype').on('change', function() { 
     if (this.value == '6') 
     //.....................^....... 
     { 
     $("#fries").show(); 
     } 
     else 
     { 
     $("#fries").hide(); 
     } 
    });

演示：https://jsfiddle.net/gd548j0g/

来源

2017-02-09 15:19:51

在你#maintypeselect，薯条有 '6' 的值。但在您的更改处理程序中，您正在查找的值为1。实际上，选择中没有值为1的值。因此，从不显示fries选择框。要么改变你的处理程序，以寻找的6的ID：

$('#maintype').on('change', function() { 
    if (this.value == '6') { 
     $("#fries").show(); 
    } else { 
     $("#fries").hide(); 
    } 
    });

或者用于炸薯条您option值更改为1：

 <select class="select" id="maintype" name="maintype"> 
      <option value=""></option> 
      <option value="3">filler</option> 
      <option value="161">Icecreams</option> 
      <option value="1">fries</option> 
      <option value="7">Others</option> 
      <option value="162">burgers</option> 
      <option value="163">drinks</option> 
     </select>

工作例如：https://jsfiddle.net/mspinks/vnofjobu/2/

来源

2017-02-09 15:20:38

<select class="select" id="maintype" name="maintype"> 
     <option value=""></option> 
     <option value="3">filler</option> 
     <option value="161">Icecreams</option> 
     <option value="6">fries</option> 
     <option value="7">Others</option> 
     <option value="162">burgers</option> 
     <option value="163">drinks</option> 

     </select> 

$('#maintype').on('change', function() { 
if (this.value == 6) 
{ 
$("#fries").show(); 
} 
else 
{ 
$("#fries").hide(); 
}

小心您分配给选项您的薯条价值的值是6，而不是1

来源

2017-02-09 15:20:45 anguswild

我在Git中检查过你的代码，你可以在showhide.js文件中用下面的代码实现你的输出。

$(document).ready(function(){ 
    $('#maintype').on('change', function() { 
     $('input[type="text"]').hide(); //Hides all input with type Text, better if we do this using class 
     var id = '#' + this.value; 
     $(id).show(); //Show input with id which you have returned with this.value 
    }); 
});

来源

2017-02-09 15:26:24

JQuery显示/隐藏给出奇怪的结果

回答

相关问题