जब ड्रॉपडाउन सूची

Question

से विकल्प चुना जाता है तो छुपा div दिखाने के लिए जावास्क्रिप्ट मेरे पास एक फॉर्म पर 5 ड्रॉप डाउन सूचियां हैं, जिसके अंतर्गत मेरे पास DIV तत्व हैं जिनके लिए उपयोगकर्ता इनपुट की आवश्यकता होती है। मैं पहली ड्रॉप डाउन सूची के लिए पहला डीआईवी प्रदर्शित करता हूं और शैली = "प्रदर्शन: कोई नहीं;" का उपयोग करके अन्य सभी रूपों को छुपाता हूं।

मैं एक जावास्क्रिप्ट की तलाश में हूं जो दूसरी डीआईवी दिखाएगा जब मैं दूसरी ड्रॉप डाउन सूची से कोई विकल्प चुनता हूं।

किसी भी सहायता की सराहना की जाएगी।

अग्रिम धन्यवाद, रयान स्मिथ

<tr> 
<td>Destination 1</td><td>Destination 2</td><td>Destination 3</td><td>Destination 4</td><td>Destination 5</td> 
</tr> 
<tr> 
<td> 
<SELECT NAME=drop1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionsdest?> 
</SELECT> 
</td> 
<td> 
<SELECT NAME=drop2 style="width:150px;" onChange="javascript to show DIV leg1b"> 
<OPTION VALUE=1><?=$optionsdest?> 
</SELECT> 
</td> 
<td> 
<SELECT NAME=drop3 style="width:150px;" onChange="javascript to show DIV leg1c"> 
<OPTION VALUE=0>0 
<OPTION VALUE=1>1 
</SELECT> 
</td> 
<td> 
<SELECT NAME=drop4 style="width:150px;" onChange="javascript to show DIV leg1d"> 
<OPTION VALUE=0> 
<?=$optionsdest?> 
</SELECT> 
</td> 
<td> 
<SELECT NAME=drop5 style="width:150px;" onChange="javascript to show DIV leg1e"> 
<OPTION VALUE=0> 
<?=$optionsdest?> 
</SELECT> 
</td> 
</tr> 

<tr> 
<td> 

Arrive Drop 1 
<br> 
<input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>> 
<br> 
<SELECT NAME=arrivetime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
<br> 
Depart Drop 1 
<br> 
<input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>> 
<br> 
<SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 

</td> 

    <td> 
<div id='legb1' style="display: none;"> 
Arrive Drop 2 
<br> 
<input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>> 
<br> 
<SELECT NAME=arrivetime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
<br> 
Depart Drop 2 
<br> 
<input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>> 
<br> 
<SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
</div> 
</td> 


    <td> 
<div id='legc1' style="display: none;"> 
Arrive Drop 3 
<br> 
<input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>> 
<br> 
<SELECT NAME=arrivetime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
<br> 
Depart Drop 3 
<br> 
<input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>> 
<br> 
<SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
</div> 
</td> 


    <td> 
<div id='legd1' style="display: none;"> 
Arrive Drop 4 
<br> 
<input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>> 
<br> 
<SELECT NAME=arrivetime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
<br> 
Depart Drop 4 
<br> 
<input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>> 
<br> 
<SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
</div> 
</td> 


    <td> 
<div id='lege1' style="display: none;"> 
Arrive Drop 5 
<br> 
<input type="date" id="arrivedatetime1" name="arrivedatetime1" value=<?PHP echo $arrivedate ?>> 
<br> 
<SELECT NAME=arrivetime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 
<br> 
Depart Drop 5 
<br> 
<input type="date" id="departdatetime1" name="departdatetime1" value=<?PHP echo $departdate ?>> 
<br> 
<SELECT NAME=departtime1 style="width:150px;"> 
<OPTION VALUE=0> 
<?=$optionstime?> 
</SELECT> 

</td> 


</tr> 

Answer 1

यहाँ एक उदाहरण है - मैं चयन

http://jsfiddle.net/mplungjan/32Ukf/

सादा जे एस

var sels = {drop2:"legb1",drop3:"legc1",drop4:"legd1",drop5:"lege1"}; 
window.onload=function() { 
    for (var sel in sels) { 
     document.getElementById(sels[sel]).style.display = document.getElementById(sel).selectedIndex>0?"block":"none"; 
     document.getElementById(sel).onchange=function() { 
     document.getElementById(sels[this.id]).style.display = this.selectedIndex>0?"block":"none"; 
     } 
    } 
} 

के नाम के रूप में एक ही आईडी जोड़ा

Answer 2

मैं div आप प्रदर्शित करना चाहते का ID करने के लिए विकल्प की value सेट करके अपने मार्कअप थोड़ा बदल जाएगा। नीचे दिया गया कोड आपको सही दिशा में ले जाना चाहिए।

<select name='drop1' style="width:150px;" onchange="ToggleDiv(this.value)"> 
    <option value="lege1">Show lege1</option> 
</select> 

तो इस विधि के साथ इसे संभाल:

function ToggleDiv(id) 
{ 
    document.getElementById(id).style.display = "block"; 
} 

यहाँ a working fiddle है।