चयन मूल्य

Question

के आधार पर फ़ील्ड दिखाएं/छुपाएं मैं अपने चयन क्षेत्रों में से किसी एक के मूल्य के आधार पर कुछ फॉर्म फ़ील्ड दिखाने और छिपाने की कोशिश कर रहा हूं। मैं बड़े पैमाने पर स्विच स्टेटमेंट से बचाने के लिए, क्या दिखाना चाहिए और प्रत्येक चयन मूल्य के लिए क्या नहीं दिखाना चाहिए, इसे रखने के लिए सरणी का उपयोग करना चाहता हूं, लेकिन यह पता नहीं लगा सकता कि इसे कैसे किया जाए।

मैं PHP और jQuery का उपयोग कर रहा हूं। कोई भी मदद बहुत अच्छी रहेगी। इस तरह

Answer 1

कोशिश कुछ:

<select id="viewSelector"> 
    <option value="0">-- Select a View --</option>  
    <option value="view1">view1</option> 
    <option value="view2">view2</option> 
    <option value="view3">view3</option> 
</select> 

<div id="view1"> 
    <!-- content --> 
</div> 
<div id="view2a"> 
    <!-- content --> 
</div> 
<div id="view2b"> 
    <!-- content --> 
</div> 
<div id="view3"> 
    <!-- content --> 
</div> 

तो jQuery में

:

$(document).ready(function() { 
    $.viewMap = { 
    '0' : $([]), 
    'view1' : $('#view1'), 
    'view2' : $('#view2a, #view2b'), 
    'view3' : $('#view3') 
    }; 

    $('#viewSelector').change(function() { 
    // hide all 
    $.each($.viewMap, function() { this.hide(); }); 
    // show current 
    $.viewMap[$(this).val()].show(); 
    }); 
}); 

Answer 2

कुछ अलग अलग तरीकों से आप यह कर सकते हैं। सबसे सरल फ़ील्ड होने के लिए सबसे सरल है, प्रत्येक में फ़ील्ड का एक समूह होता है। फिर, jQuery में, चयन-मेनू के मान पर निर्भर करते हुए आप इन फ़ील्डरों को दिखा/छुपा सकते हैं, उदा।

<fieldset id="f1"> 
    <input name="something1" /> 
    <input name="something2" /> 
    <input name="something3" /> 
</fieldset> 
<fieldset id="f2"> 
    <input name="something4" /> 
    <input name="something5" /> 
    <input name="something6" /> 
</fieldset> 
<select name="fieldset-choice"> 
    <option value="f1">Fieldset 1</option> 
    <option value="f2">Fieldset 2</option> 
</select> 

<script type="text/javascript"> 
    jQuery('select[name=fieldset-choice]').change(function(){ 
     var fieldsetName = $(this).val(); 
     $('fieldset').hide().filter('#' + fieldsetName).show(); 
    }); 

    // We need to hide all fieldsets except the first: 
    $('fieldset').hide().filter('#f1').show(); 
</script> 

नोट: उपरोक्त तकनीक पूरी तरह से विनीत होने के लिए आप गतिशील रूप से सभी विभिन्न fieldsets के नाम के साथ चयन-मेनू का निर्माण करना चाहते हो सकता है।

---

वैकल्पिक रूप से आप उस गुण के अनुसार शो उपसर्ग कर सकते हैं प्रत्येक क्षेत्रों के लिए एक सार्थक उपसर्ग के साथ नाम, और फिर छिपाने /:

<input name="group1-name1" /> 
<input name="group1-name2" /> 

<input name="group2-name3" /> 
<input name="group2-name4" /> 
<input name="group2-name5" /> 

<select name="field-choice"> 
    <option value="group1">Group 1</option> 
    <option value="group2">Group 2</option> 
</select> 

<script type="text/javascript"> 
    jQuery('select[name=field-choice]').change(function(){ 
     var groupName = $(this).val(); 
     $('input').hide().filter('[name^=' + groupName + ']').show(); 
    }); 

    // We need to hide all fields except those of the first group: 
    $('input').hide().filter('[name^=group1]').show(); 
</script> 

Answer 3

लोड पर कोड को सक्रिय करने के लिए, बस .change जोड़ने() । नीचे दिखाया गया है ...

$(document).ready(function() { 
    $.viewMap = { 
    '0' : $([]), 
    'view1' : $('#view1'), 
    'view2' : $('#view2a, #view2b'), 
    'view3' : $('#view3') 
    }; 

    $('#viewSelector').change(function() { 
    // hide all 
    $.each($.viewMap, function() { this.hide(); }); 
    // show current 
    $.viewMap[$(this).val()].show(); 
    }).change(); 
}); 

Answer 4

@Martin इस

`$('#viewSelector').trigger('change');` 

Answer 5

मेरे 2 सेंट का प्रयास करें: मैं (न केवल एक) पिछले कई चुनिंदा मूल्य के आधार पर/छिपाने क्षेत्रों को दिखाने के लिए की जरूरत है।

तो मैं इस तरह खेतों div करने के लिए एक माता पिता के गुण जोड़ें:

<div id="view" parent="none"> 
<select class=selector id="view"> 
<option value="0"> -- Make a choice --</option> 
<option value="s1">sub 1</option> 
<option value="s2">sub 2</option> 
<option value="s3">sub 3</option> 
</select> 
</div> 

<!-- you need to define the parent value with the value of parent div id --> 
<div id="s1" parent="view"> 
<!-- if you want to have a selector be sure it has the same id as the div --> 
<select class=selector id="s1"> 
<option value="0">-- Make a choice --</option> 
<option value="s1_sub1">sub 1 of s1</option> 
<option value="s1_sub2">sub 2 of s2</option> 
<option value="s1_sub3">sub 3 of s3</option> 
</select> 
</div> 

<!-- Make the same thing for s2 and s3 
Define div s2 here 

Define div s3 here 
--> 

<!-- and finally if that's your final step you put what you want in the div --> 
<div id="s1_sub1" parent="s1"> 
You are inside s1 sub1 
</div> 

अब jQuery कोड:

$(document).ready(function() { 

$('select[class=selector]').change(function() { 
    //next div to show 
    var selectorActive = $(this).val(); 
    //div where you are 
    var parentValue = $(this).attr("id"); 

    //show active div and hide others 
    $('div').hide().filter('#' + selectorActive).show(); 

    while (parentValue!="none") { 
     //then show parents of active div 
     $('div[id=' + parentValue + ']').show(); 
     //return the parent of div until "none" 
     parentValue = $('div[id=' + parentValue + ']').attr("parent"); 
    } 

}); 

// print only the first div at start 
$('div').hide().filter("#view").show(); 

}); 

कि चलो एक आकर्षण की तरह काम करता है

और आप नक्शे

परिभाषित करने की जरूरत नहीं है

मुझे आशा है कि यह मदद मिलेगी