Question

嘿大家所以我对Jquery＆amp; amp; javascript＆amp;我正在处理前一个开发人员留下的一些代码。我需要在每个下拉菜单中显示的值取决于它上面的值，并且只显示每个选项的正确值。我环顾四周，以这种方式找到了关于2阶段下拉的信息，但从那以后再也没有添加额外的阶段。这是我下面的代码：

$(function(){
  var $cat = $("#category1"),
      $subcat = $("#category2"),
      $volt = $("#category3");

      $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
      });

      $subcat.on("change",function(){
        var _rel = $(this).val();
        $volt.find("option").attr("style","");
        $volt.val("");
        if(!_rel) return $volt.prop("disabled",true);
        $volt.find("[rel="+_rel+_rel+"]").show();
        $volt.prop("disabled",false);
      });

});

#category2 option{
        display:none;
    }
    
    #category2 option.label{
        display:block;
    }
    
    #category3 option{
        display:none;
    }
    
    #category3 option.label{
        display:block;
    }

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

    <form id="formname" name="formname" method="post" action="submitform.asp" >
        <table width="50%" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <td width="41%" align="right" valign="middle">First Dropdown Menu:</td>
                <td width="59%" align="left" valign="middle">
                    <select name="category1" id="category1">
                        <option value="">Please Select</option>
                        <option value="Option1">ONE</option>
                        <option value="Option2">TWO</option>
                        <option value="Option3">THREE</option>
                        <option value="Option4">FOUR</option>
                    </select>
                </td>
            </tr>
    <form id="formname1" name="formname1" method="post" action="submitform.asp" >
            <tr>
                <td align="right" valign="middle">Second Dropdown Menu:</td>
                <td align="left" valign="middle">
                    <select disabled="disabled" id="category2" name="category2">
                        <option class="label" value>Please Select</option>
    <!-- R -->
                        <option rel="Option1" value="R12">12</option>
                        <option rel="Option1" value="R24">24</option>
                        <option rel="Option1" value="R36">36</option>
                        <option rel="Option1" value="R48">48</option>
                        <option rel="Option1" value="R80">80</option>
    <!-- H -->
                        <option rel="Option2" value="H12">12</option>
                        <option rel="Option2" value="H24">24</option>
                        <option rel="Option2" value="H36">36</option>
                        <option rel="Option2" value="H48">48</option>
                        <option rel="Option2" value="H80">80</option>
    <!-- L -->
                        <option rel="Option3" value="L12">12</option>
                        <option rel="Option3" value="L24">24</option>
                        <option rel="Option3" value="L36">36</option>
                        <option rel="Option3" value="L48">48</option>
                        <option rel="Option3" value="L80">80</option>
    <!-- B -->
                        <option rel="Option4" value="B12">12</option>
                        <option rel="Option4" value="B24">24</option>
                        <option rel="Option4" value="B36">36</option>
                        <option rel="Option4" value="B48">48</option>
                        <option rel="Option4" value="B80">80</option>
                    </select>
                </td>
            </tr>
    <form id="formname2" name="formname2" method="post" action="submitform.asp" >
            <tr>
                <td align="right" valign="middle">Third Dropdown Menu</td>
                <td align="left" valign="middle">
                    <select disabled="disabled" id="category3" name="category3">
    <option class="label" value>Please Select</option>
    <!-- R -->
                        <option rel="R12" value="12v1">R12V1</option>
                        <option rel="R24" value="R24v1">R24V1</option>
                        <option rel="R36" value="R36v1">R36V1</option>
                        <option rel="R48" value="R48v1">R48V1</option>
                        <option rel="R80" value="R80v1">R80V1</option>
    <!-- H -->
                        <option rel="H12" value="H12v1">H12V1</option>
                        <option rel="H24" value="H24v1">H24V1</option>
                        <option rel="H36" value="H36v1">H36V1</option>
                        <option rel="H48" value="H48v1">H48V1</option>
                        <option rel="H80" value="H80v1">H80V1</option>
    <!-- L -->
                        <option rel="L12" value="L12v1">L12V1</option>
                        <option rel="L24" value="L24v1">L24V1</option>
                        <option rel="L36" value="L36v1">L36V1</option>
                        <option rel="L48" value="L48v1">L48V1</option>
                        <option rel="L80" value="L80v1">L80V1</option>
    <!-- B -->
                        <option rel="B12" value="B12v1">B12V1</option>
                        <option rel="B24" value="B24v1">B24V1</option>
                        <option rel="B36" value="B36v1">B36V1</option>
                        <option rel="B48" value="B48v1">B48V1</option>
                        <option rel="B80" value="B80v1">B80V1</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
    </html>

我可以让第二个菜单正常工作，但第三个菜单总是只显示所有内容，或根本不起作用。我不能让它依赖于第二个菜单的值。有谁知道如何解决这个问题？任何帮助将不胜感激。

Answer 1

您需要更改

$volt.find("[rel="+_rel+_rel+"]").show();

到

$volt.find("[rel="+_rel+"]").show();

＆＃13;

$(function(){
    
      var $cat = $("#category1"),
          $subcat = $("#category2"),
          $volt = $("#category3");

          $cat.on("change",function(){
            var _rel = $(this).val();
            $subcat.find("option").attr("style","");
            $subcat.val("");
            if(!_rel) return $subcat.prop("disabled",true);
            $subcat.find("[rel="+_rel+"]").show();
            $subcat.prop("disabled",false);
          });

          $subcat.on("change",function(){
          debugger;
            var _rel = $(this).val();
            $volt.find("option").attr("style","");
            $volt.val("");
            if(!_rel) return $volt.prop("disabled",true);
            $volt.find("[rel="+_rel+"]").show();
            $volt.prop("disabled",false);
          });
    
    });

＆＃13;

#category2 option{
        display:none;
    }
    
    #category2 option.label{
        display:block;
    }
    
    #category3 option{
        display:none;
    }
    
    #category3 option.label{
        display:block;
    }

＆＃13;

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <form id="formname" name="formname" method="post" action="submitform.asp" >
      <table width="50%" border="0" cellspacing="0" cellpadding="5">
          <tr>
              <td width="41%" align="right" valign="middle">First Dropdown Menu:</td>
              <td width="59%" align="left" valign="middle">
                  <select name="category1" id="category1">
                      <option value="">Please Select</option>
                      <option value="Option1">ONE</option>
                      <option value="Option2">TWO</option>
                      <option value="Option3">THREE</option>
                      <option value="Option4">FOUR</option>
                  </select>
              </td>
          </tr>
  <form id="formname1" name="formname1" method="post" action="submitform.asp" >
          <tr>
              <td align="right" valign="middle">Second Dropdown Menu:</td>
              <td align="left" valign="middle">
                  <select disabled="disabled" id="category2" name="category2">
                      <option class="label" value>Please Select</option>
  <!-- R -->
                      <option rel="Option1" value="R12">12</option>
                      <option rel="Option1" value="R24">24</option>
                      <option rel="Option1" value="R36">36</option>
                      <option rel="Option1" value="R48">48</option>
                      <option rel="Option1" value="R80">80</option>
  <!-- H -->
                      <option rel="Option2" value="H12">12</option>
                      <option rel="Option2" value="H24">24</option>
                      <option rel="Option2" value="H36">36</option>
                      <option rel="Option2" value="H48">48</option>
                      <option rel="Option2" value="H80">80</option>
  <!-- L -->
                      <option rel="Option3" value="L12">12</option>
                      <option rel="Option3" value="L24">24</option>
                      <option rel="Option3" value="L36">36</option>
                      <option rel="Option3" value="L48">48</option>
                      <option rel="Option3" value="L80">80</option>
  <!-- B -->
                      <option rel="Option4" value="B12">12</option>
                      <option rel="Option4" value="B24">24</option>
                      <option rel="Option4" value="B36">36</option>
                      <option rel="Option4" value="B48">48</option>
                      <option rel="Option4" value="B80">80</option>
                  </select>
              </td>
          </tr>
  <form id="formname2" name="formname2" method="post" action="submitform.asp" >
          <tr>
              <td align="right" valign="middle">Third Dropdown Menu</td>
              <td align="left" valign="middle">
                  <select disabled="disabled" id="category3" name="category3">
  <option class="label" value>Please Select</option>
  <!-- R -->
                      <option rel="R12" value="12v1">R12V1</option>
                      <option rel="R24" value="R24v1">R24V1</option>
                      <option rel="R36" value="R36v1">R36V1</option>
                      <option rel="R48" value="R48v1">R48V1</option>
                      <option rel="R80" value="R80v1">R80V1</option>
  <!-- H -->
                      <option rel="H12" value="H12v1">H12V1</option>
                      <option rel="H24" value="H24v1">H24V1</option>
                      <option rel="H36" value="H36v1">H36V1</option>
                      <option rel="H48" value="H48v1">H48V1</option>
                      <option rel="H80" value="H80v1">H80V1</option>
  <!-- L -->
                      <option rel="L12" value="L12v1">L12V1</option>
                      <option rel="L24" value="L24v1">L24V1</option>
                      <option rel="L36" value="L36v1">L36V1</option>
                      <option rel="L48" value="L48v1">L48V1</option>
                      <option rel="L80" value="L80v1">L80V1</option>
  <!-- B -->
                      <option rel="B12" value="B12v1">B12V1</option>
                      <option rel="B24" value="B24v1">B24V1</option>
                      <option rel="B36" value="B36v1">B36V1</option>
                      <option rel="B48" value="B48v1">B48V1</option>
                      <option rel="B80" value="B80v1">B80V1</option>
                  </select>
              </td>
          </tr>
      </table>
  </form>

＆＃13;

Answer 2

问题是您在_rel中指定了$volt.find("[rel="+_rel+_rel+"]").show();两次。只需删除其中一个。

我还建议将第二个变量名称更改为_rel2，如下例所示：

＆＃13;

#category2 option{
        display:none;
    }
    
    #category2 option.label{
        display:block;
    }
    
    #category3 option{
        display:none;
    }
    
    #category3 option.label{
        display:block;
    }

＆＃13;

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    $(function(){
    
      var $cat = $("#category1"),
          $subcat = $("#category2"),
          $volt = $("#category3");

          $cat.on("change",function(){
            var _rel = $(this).val();
            $subcat.find("option").attr("style","");
            $subcat.val("");
            if(!_rel) return $subcat.prop("disabled",true);
            $subcat.find("[rel="+_rel+"]").show();
            $subcat.prop("disabled",false);
          });

          $subcat.on("change",function(){
            var _rel2 = $(this).val();
            $volt.find("option").attr("style","");
            $volt.val("");
            if(!_rel2) return $volt.prop("disabled",true);
            $volt.find("[rel="+_rel2+"]").show();
            $volt.prop("disabled",false);
          });
    
    });
    </script>
    <form id="formname" name="formname" method="post" action="submitform.asp" >
        <table width="50%" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <td width="41%" align="right" valign="middle">First Dropdown Menu:</td>
                <td width="59%" align="left" valign="middle">
                    <select name="category1" id="category1">
                        <option value="">Please Select</option>
                        <option value="Option1">ONE</option>
                        <option value="Option2">TWO</option>
                        <option value="Option3">THREE</option>
                        <option value="Option4">FOUR</option>
                    </select>
                </td>
            </tr>
    <form id="formname1" name="formname1" method="post" action="submitform.asp" >
            <tr>
                <td align="right" valign="middle">Second Dropdown Menu:</td>
                <td align="left" valign="middle">
                    <select disabled="disabled" id="category2" name="category2">
                        <option class="label" value>Please Select</option>
    <!-- R -->
                        <option rel="Option1" value="R12">12</option>
                        <option rel="Option1" value="R24">24</option>
                        <option rel="Option1" value="R36">36</option>
                        <option rel="Option1" value="R48">48</option>
                        <option rel="Option1" value="R80">80</option>
    <!-- H -->
                        <option rel="Option2" value="H12">12</option>
                        <option rel="Option2" value="H24">24</option>
                        <option rel="Option2" value="H36">36</option>
                        <option rel="Option2" value="H48">48</option>
                        <option rel="Option2" value="H80">80</option>
    <!-- L -->
                        <option rel="Option3" value="L12">12</option>
                        <option rel="Option3" value="L24">24</option>
                        <option rel="Option3" value="L36">36</option>
                        <option rel="Option3" value="L48">48</option>
                        <option rel="Option3" value="L80">80</option>
    <!-- B -->
                        <option rel="Option4" value="B12">12</option>
                        <option rel="Option4" value="B24">24</option>
                        <option rel="Option4" value="B36">36</option>
                        <option rel="Option4" value="B48">48</option>
                        <option rel="Option4" value="B80">80</option>
                    </select>
                </td>
            </tr>
    <form id="formname2" name="formname2" method="post" action="submitform.asp" >
            <tr>
                <td align="right" valign="middle">Third Dropdown Menu</td>
                <td align="left" valign="middle">
                    <select disabled="disabled" id="category3" name="category3">
    <option class="label" value>Please Select</option>
    <!-- R -->
                        <option rel="R12" value="12v1">R12V1</option>
                        <option rel="R24" value="R24v1">R24V1</option>
                        <option rel="R36" value="R36v1">R36V1</option>
                        <option rel="R48" value="R48v1">R48V1</option>
                        <option rel="R80" value="R80v1">R80V1</option>
    <!-- H -->
                        <option rel="H12" value="H12v1">H12V1</option>
                        <option rel="H24" value="H24v1">H24V1</option>
                        <option rel="H36" value="H36v1">H36V1</option>
                        <option rel="H48" value="H48v1">H48V1</option>
                        <option rel="H80" value="H80v1">H80V1</option>
    <!-- L -->
                        <option rel="L12" value="L12v1">L12V1</option>
                        <option rel="L24" value="L24v1">L24V1</option>
                        <option rel="L36" value="L36v1">L36V1</option>
                        <option rel="L48" value="L48v1">L48V1</option>
                        <option rel="L80" value="L80v1">L80V1</option>
    <!-- B -->
                        <option rel="B12" value="B12v1">B12V1</option>
                        <option rel="B24" value="B24v1">B24V1</option>
                        <option rel="B36" value="B36v1">B36V1</option>
                        <option rel="B48" value="B48v1">B48V1</option>
                        <option rel="B80" value="B80v1">B80V1</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
    </html>

＆＃13;

希望这有帮助！：）

Answer 3

你的代码几乎是完美的。你只需要调整这一行：

$volt.find("[rel="+_rel+"]").show();

获取show()

的正确值

$(function(){
    
      var $cat = $("#category1"),
          $subcat = $("#category2"),
          $volt = $("#category3");

          $cat.on("change",function(){
            var _rel = $(this).val();
            $subcat.find("option").attr("style","");
            $subcat.val("");
            if(!_rel) return $subcat.prop("disabled",true);
            $subcat.find("[rel="+_rel+"]").show();
            $subcat.prop("disabled",false);
          });

          $subcat.on("change",function(){
          debugger;
            var _rel = $(this).val();
            $volt.find("option").attr("style","");
            $volt.val("");
            if(!_rel) return $volt.prop("disabled",true);
            $volt.find("[rel="+_rel+"]").show();
            $volt.prop("disabled",false);
          });
    
    });

#category2 option{
        display:none;
    }
    
    #category2 option.label{
        display:block;
    }
    
    #category3 option{
        display:none;
    }
    
    #category3 option.label{
        display:block;
    }

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <form id="formname" name="formname" method="post" action="submitform.asp" >
        <table width="50%" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <td width="41%" align="right" valign="middle">First Dropdown Menu:</td>
                <td width="59%" align="left" valign="middle">
                    <select name="category1" id="category1">
                        <option value="">Please Select</option>
                        <option value="Option1">ONE</option>
                        <option value="Option2">TWO</option>
                        <option value="Option3">THREE</option>
                        <option value="Option4">FOUR</option>
                    </select>
                </td>
            </tr>
    <form id="formname1" name="formname1" method="post" action="submitform.asp" >
            <tr>
                <td align="right" valign="middle">Second Dropdown Menu:</td>
                <td align="left" valign="middle">
                    <select disabled="disabled" id="category2" name="category2">
                        <option class="label" value>Please Select</option>
    <!-- R -->
                        <option rel="Option1" value="R12">12</option>
                        <option rel="Option1" value="R24">24</option>
                        <option rel="Option1" value="R36">36</option>
                        <option rel="Option1" value="R48">48</option>
                        <option rel="Option1" value="R80">80</option>
    <!-- H -->
                        <option rel="Option2" value="H12">12</option>
                        <option rel="Option2" value="H24">24</option>
                        <option rel="Option2" value="H36">36</option>
                        <option rel="Option2" value="H48">48</option>
                        <option rel="Option2" value="H80">80</option>
    <!-- L -->
                        <option rel="Option3" value="L12">12</option>
                        <option rel="Option3" value="L24">24</option>
                        <option rel="Option3" value="L36">36</option>
                        <option rel="Option3" value="L48">48</option>
                        <option rel="Option3" value="L80">80</option>
    <!-- B -->
                        <option rel="Option4" value="B12">12</option>
                        <option rel="Option4" value="B24">24</option>
                        <option rel="Option4" value="B36">36</option>
                        <option rel="Option4" value="B48">48</option>
                        <option rel="Option4" value="B80">80</option>
                    </select>
                </td>
            </tr>
    <form id="formname2" name="formname2" method="post" action="submitform.asp" >
            <tr>
                <td align="right" valign="middle">Third Dropdown Menu</td>
                <td align="left" valign="middle">
                    <select disabled="disabled" id="category3" name="category3">
    <option class="label" value>Please Select</option>
    <!-- R -->
                        <option rel="R12" value="12v1">R12V1</option>
                        <option rel="R24" value="R24v1">R24V1</option>
                        <option rel="R36" value="R36v1">R36V1</option>
                        <option rel="R48" value="R48v1">R48V1</option>
                        <option rel="R80" value="R80v1">R80V1</option>
    <!-- H -->
                        <option rel="H12" value="H12v1">H12V1</option>
                        <option rel="H24" value="H24v1">H24V1</option>
                        <option rel="H36" value="H36v1">H36V1</option>
                        <option rel="H48" value="H48v1">H48V1</option>
                        <option rel="H80" value="H80v1">H80V1</option>
    <!-- L -->
                        <option rel="L12" value="L12v1">L12V1</option>
                        <option rel="L24" value="L24v1">L24V1</option>
                        <option rel="L36" value="L36v1">L36V1</option>
                        <option rel="L48" value="L48v1">L48V1</option>
                        <option rel="L80" value="L80v1">L80V1</option>
    <!-- B -->
                        <option rel="B12" value="B12v1">B12V1</option>
                        <option rel="B24" value="B24v1">B24V1</option>
                        <option rel="B36" value="B36v1">B36V1</option>
                        <option rel="B48" value="B48v1">B48V1</option>
                        <option rel="B80" value="B80v1">B80V1</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>

带有Jquery的3级依赖下拉菜单

3 个答案: