Question

我正在尝试使用javascript创建二级下拉列表，但它不会显示我第二个下拉列表。有一个代码，我已经尝试了什么是我必须做的更改，所以代码可以正常工作？？

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

          $("#Category").change(function () {
        var correspondingID = $(this).find(":selected").val();
        $(".style-sub-1").hide();
        $("#" + correspondingID).show();

    });

    </script>
</head>
<body>
  <div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Choose Category:</label>
<select size="1" id="Category" class=" validate['required']" title="" type="select" name="Category" value="-Select Your Category-">
    <optgroup label="-Select Your Category-">
        <option value="Charging">Charging</option>
        <option value="Consent">Consent</option>
    </optgroup>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>

<div id="Charging" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
   <label>Which Sub-Category?</label>
   <select id="Charging" name="Charging">
    <option value="">-Choose A Sub-Category-</option>
    <option value="Charging">Charging</option>
</select>
</div>
<div id="Consent" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Which Sub-Category?</label>
<select id="Consent" name="Consent">
    <option value="">-Choose A Sub-Category-</option>
    <option value="Accuracy">Accuracy</option>
    <option value="Double Confirmation">Double Confirmation</option>
    <option value="Single Confirmation">Single Confirmation</option>
 </select>
</div>
    <div class="clear"></div>
<div id="error-message-style-sub-1"></div>
</body>
</html>

Answer 1

试试这个：

$("#Category").change(function () {
    var correspondingID = $(this).find(":selected").attr('id');
    $(".style-sub-1").hide();
    $("#" + correspondingID).show();

Answer 2

正如我的一位朋友@Pritesh usadadiya所建议的，正确的javascript代码如下：

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
     $(document).ready(function(){
         $("#Category").change(function () {
            correspondingID = $(this).find(":selected").val();
            $(".style-sub-1").hide();
            $("#" + correspondingID).show();
        });
     });


</script>

使用javascript创建动态二级下拉列表

2 个答案: