दिखाएँ/jQuery

Question

का उपयोग कर चयन मैं अनिवार्य रूप से निम्नलिखित प्रश्न में व्यक्ति के रूप में एक ही स्थिति है के साथ कई DIVs छिपाएं:

लिंक: how to show/hide divs by select.(jquery)

गूगल के भीतर व्यापक खोज के माध्यम से मैं कई के साथ आने में सक्षम था विभिन्न तरीकों से लोग अपने तरीके का दावा करते हैं। मुझे अभी तक सही तरीके से काम करने के लिए कोई भी नहीं मिला है। मैं अभी तक पूरी तरह से समझने के लिए jQuery के बारे में पर्याप्त नहीं जानता कि इसे स्क्रैच से कैसे लिखना है, इस प्रकार मैं अब के लिए वास्तव में अच्छे उदाहरणों पर भरोसा करता हूं।

<script type="text/javascript"> 
    (document).ready(function() { 
     ('.box').hide();<br/> 
     ('#dropdown').change(function() { 
     ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]() 
     ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]() 
     ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]() 
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

• नोट::

  क्या मैं के साथ काम करने की कोशिश कर रहा है (उदाहरण के आधार पर मैंने पाया और कोशिश की है) यह है मैं नहीं बल्कि कम से कम-से और अधिक से अधिक कोष्ठक का उपयोग कर रहा इस संदेश में सही तरीके से प्रदर्शित करने के लिए एचटीएमएल के आसपास संकेत।

मुझे क्या मिलेगा जब मैं इस परीक्षण: चयनित कुछ भी नहीं के साथ पहली बार प्रस्तुत होने पर

• => कोई DIV प्रदर्शन है।
• जब मैं DIV क्षेत्र 1 => DIV क्षेत्र 2 और 3 का चयन करता हूं तो प्रदर्शित होता है।
• जब मैं DIV Area 2 => DIV Area 1 और 3 का चयन करता हूं तो प्रदर्शित होता है।
• जब मैं DIV क्षेत्र 3 => DIV क्षेत्र 1 और 2 का चयन करता हूं तो प्रदर्शित होता है।

मेरा दिमाग दिन के लिए तला हुआ है। मुझे इसे ठीक करने के लिए क्या करना चाहिए?

Answer 1

स्वैप दिखाएँ/छिपाएँ इतना है कि यह इस तरह दिखता है:

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]() 

Answer 2

इस कोड को थोड़ा और अधिक संक्षिप्त है:

$(document).ready 
(
    function() 
    { 
    $("div.box").hide(); 
    $("#dropdown").change 
    (
     function() 
     { 
     var selectedValue = $(this).val(); 
     if(selectedValue !== "0") 
     { 
      $("div.box").show(); 
      $("#div" + selectedValue).hide(); 
     } 
     } 
    ); 
    } 
}; 

अनिवार्य रूप से, अगर वहाँ चयनित एक मूल्य है (यानी, विकल्प "चुनें" पर सेट नहीं है), तो सभी div.box तत्व दिखाए जाते हैं। चयनित विकल्प से मेल खाने वाला डीआईवी तब छिपा हुआ है। यह जल्दी से पर्याप्त होना चाहिए ताकि फ्लैश ध्यान देने योग्य न हो।

Answer 3

मैं यह कर चाहते हैं:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.box').hide(); 
    $('#dropdown').change(function() { 
    $('.box').hide(); 
    $('#div' + $(this).val()).show(); 
}); 
}); 
</script> 
<form> 
<select id="dropdown" name="dropdown"> 
    <option value="0">Choose</option> 
    <option value="area1">DIV Area 1</option> 
    <option value="area2">DIV Area 2</option> 
    <option value="area3">DIV Area 3</option> 
</select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

Answer 4

@fudgey एक अच्छा समाधान दे दी है। लेकिन थोड़ा संदेह है। यह मूल्य पर निर्भर करेगा और <div> की विशेषता आईडी को हर बार बदलने की आवश्यकता होगी।

तो मैं इस `

$(document).ready(function() { 
     $('.box').hide(); 
     $('#dropdown').change(function() {  
      var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :     $(this).attr("selectedIndex"); 
      if("" != selectedIdx){ 
       $('#divarea'+ selectedIdx).hide().siblings().show(); 
      } else { 
       $('.box').hide(); 
      }   
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 
</html>`