चयनित विकल्प

Question

के आधार पर फ़ॉर्म की दृश्यता बदलें, मैं एक शोध फ़ॉर्म बना रहा हूं जो एक चयन मूल्य की पसंद के आधार पर अलग-अलग प्रदर्शित होगा। मैंने यहां खोज के बाद कुछ jQuery चालें लागू की हैं। दुर्भाग्यवश, यह बिल्कुल काम नहीं करता है।

एचटीएमएल:

<select name="options" id="choice"> 
    <option value="0" selected="true">Choose...</option> 
    <optgroup label='ABC'> 
     <option value="1">...DEF</option> 
     <option value="2">...GHL</option> 
    </optgroup> 
    <optgroup label="MNP:"> 
     <option value="3">X</option> 
     <option value="4">Y</option> 
     <option value="5">Z</option> 
    </optgroup> 
</select> 
<form id="opt1" name="opt1" style="display: none">11111111</form> 
<form id="opt2" name="opt2" style="display: none">22222222</form> 
<form id="opt3" name="opt3" style="display: none">33333333</form> 
<form id="opt4" name="opt4" style="display: none">44444444</form> 
<form id="opt5" name="opt5" style="display: none">55555555</form> 

जावास्क्रिप्ट: यहाँ मेरी कोड है

$("#choice").change(function() { 
    $("form").hide(); 
    $("#opt" + $(this).val()).show(); 
}); 

Answer 1

यह एक

$(document).ready(function(){ 
$('select').change(function() { 
    //var selected = $(':selected', this); 
    //alert(selected.closest('optgroup').attr('label')); 
    $("form").hide(); 
    $("#opt" + $(this).val()).show(); 
}); 
}); 

डेमो का प्रयास करें here

Answer 2

ए @ गुराडियो बताते हैं, कोड खराब में ठीक काम करता है। इस मुद्दे को डीबग करने के लिए alert एस या console.log() डालने का प्रयास करें ताकि यह पता चल सके। आशा है कि आपके पास आपके पृष्ठ पर jQuery लाइब्रेरी जोड़ा गया है।

इन का प्रयास करें:

$("#choice").change(function() { 
    alert('fine till here'); 
    $("form").hide(); 
    $("#opt" + $(this).val()).show(); 
}); 

Answer 3

आपका कूट चल रहा है, मुझे लगता है कि आप फार्म पर जे खोज लाइब्रेरी याद कर रहे हैं। कृपया जोड़ें।

jsfiddle.net/f5xuc0gh/