使用javascript創建動態第二級下拉列表

我想創建第二級下拉列表使用JavaScript，但它不會顯示我第二下拉列表。有一個代碼，我已經嘗試過什麼是我有更改這樣做的代碼可以正常工作？使用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>

來源

2015-02-24 Trilok Patel

你是從這個期待'究竟是什麼http：// codepen.io/abgth/pen/GgdQWo' （僅供說明，代碼相同） – 2015-02-24 08:57:24

它的工作，但是當我合併這些並嘗試在netbeans中運行時，它將無法工作！！ – 2015-02-24 09:04:04

您是否添加了JQuery，顯然在代碼中缺少jquery。在'JS'代碼之前添加'' – 2015-02-24 09:07:13

試試這個：

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

來源

2015-02-24 08:56:36 krachleur

而不是獲取所選元素的值，你必須得到ID – krachleur 2015-02-24 08:58:47

它不工作。我以前的代碼已經運行在http://jsfiddle.net/32fc3qbc/，但是當我合併並嘗試在netbeans中運行它不會工作，你可以在網上檢查... – 2015-02-24 09:03:22

我試過你的代碼，我更換了更改函數內的代碼，並發現這是不響應更改事件 – krachleur 2015-02-24 09:25:50

至於建議由我的朋友@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>

來源

2015-02-24 09:47:26

使用javascript創建動態第二級下拉列表

回答

相關問題