2015-02-24 2 views
0

Я пытаюсь создать раскрывающийся список второго уровня с помощью 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> 
+0

Что именно вы ждете от этого ' http: // codepen.io/abgth/pen/GgdQWo' (Только для уточнения, тот же код) –

+0

его работа над ним, но когда я сливаю их и пытаюсь работать в netbeans, это не сработает! !!! –

+0

Вы добавили JQuery, видимо, jquery отсутствует в коде. добавьте '' перед кодом JS' –

ответ

0

попробовать это:

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

вместо того, чтобы получать значение выбранного элемента, вы должны получить идентификатор – krachleur

+0

, он не работает. Мой предыдущий код уже запущен на http://jsfiddle.net/32fc3qbc/, но когда я сливаюсь и пытаюсь работать в netbeans он не будет работать, вы можете проверить его онлайн ... –

+0

Я пробовал ваш код, я заменил код в функции изменения и понял, что не отвечает на событие изменения – krachleur

0

По предложению одного из моего друга @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> 
Смежные вопросы