Question

我有一些奇怪的问题与javascript我无法解决。我有三个带有小js文件的html输入框，根据第一个框中选取的内容显示或隐藏第二个和第三个。我正在使用这些功能：

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

我遇到的问题是，当我突出显示＆＃34; fries＆＃34;时，第二个下拉列表未显示。永远不会显示第三个输入框。我尝试过各种各样的解决方案，但我无法弄清楚原因。

我将代码放在github

上

任何可以让我了解我出错的地方的人？是否可能有另一种更简单的方法来完成这项工作？

Answer 1

<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/

Answer 2

在#maintype select中，薯条的值为＆＃39; 6＆＃39;。但是在您的更改处理程序中，您正在寻找值1。实际上，select中没有值为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/

Answer 3

<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

Answer 4

我已经在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
    });
});

Answer 5

您有两个问题：

我遇到的问题是，当我突出显示“fries”
时，第二个下拉列表未显示

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

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

但检查应为'6'，因为这是您在#maintype select中为其指定的值。

另一个问题：

永远不会显示第三个输入框。

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

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

JQuery show / hide给出了奇怪的结果

5 个答案: