2011-08-05 23 views
16

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

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

http://jsfiddle.net/whkQw/20/

हालांकि, ऊपर के उदाहरण के विपरीत, मैं विकल्पों में से एक अलग सेट पहले ड्रॉपडाउन बॉक्स में चयनित प्रत्येक विकल्प के लिए ड्रॉपडाउन बॉक्स में प्रदर्शित करने के लिए है, और यह मैं क्या मतलब का एक आदर्श उदाहरण है सिर्फ विकल्पों में से एक के लिए नहीं। दूसरे शब्दों में, उपरोक्त उदाहरण में, यदि आप "चीन" चुनते हैं तो दूसरा ड्रॉपडाउन बॉक्स दिखाई देगा, लेकिन यदि आप कुछ और चुनते हैं तो यह छिपा रहेगा। यही वह नहीं है जो मैं चाहता हूं। यदि आप "ताइवान" चुनते हैं, तो मैं प्रदर्शित करने के लिए एक अलग ड्रॉपडाउन चाहता हूं, और फिर भी यदि आप "जर्मनी" और प्रत्येक विकल्प के लिए चुना गया है तो प्रदर्शित करने के लिए एक अलग ड्रॉपडाउन। मैंने प्रत्येक विकल्प के लिए उस उदाहरण में जावास्क्रिप्ट को डुप्लिकेट करने का प्रयास किया, तदनुसार नाम टैग बदलना, लेकिन यह काम नहीं किया (जब जावास्क्रिप्ट की बात आती है तो मैं नौसिखिया हूं)।

तो मैं इस उदाहरण भर में भाग गया है, जो वास्तव में मैं देख रहा हूँ बात की तरह है:

http://jsfiddle.net/e9XvP/

किसी कारण के लिए इस कोड मेरे लिए काम नहीं लगता है के लिए अभी तक। इसका कोई प्रभाव नहीं है; दूसरा ड्रॉपडाउन बस चुने गए चीज़ों के बावजूद छुपा रहता है। मेरी ड्रॉपडाउन सूचियां उपर्युक्त उदाहरण में से अधिक की तुलना में अधिक असंख्य और लंबी हैं।

ड्रापडाउन 1

<div class="ccms_form_element cfdiv_custom" id="style_container_div"> 
<label>Choose Rank: </label><select size="1" id="Rank" class=" validate['required']" title="" type="select" name="Rank"> 
    <option value="">-Select Your Rank-</option> 
    <option value="Airman">Airman</option> 
    <option value="Airman First Class">Airman First Class</option> 
    <option value="Senior Airman">Senior Airman</option> 
    <option value="Staff Sergeant">Staff Sergeant</option> 
    <option value="Senior Master Sergeant">Senior Master Sergeant</option> 
</select><div class="clear"></div><div id="error-message-style"></div></div> 

ड्रापडाउन 2:: यहाँ एचटीएमएल मैं अभी

<div id="Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Airman" name="Airman"> 
     <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1a">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2a">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3a">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4a">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5a">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6a">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7a">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1a">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2a">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3a">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4a">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5a">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6a">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7a">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1a">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2a">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3a">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4a">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5a">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6a">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7a">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1a">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2a">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3a">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4a">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5a">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6a">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7a">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1a">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2a">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3a">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4a">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5a">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6a">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7a">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1a">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2a">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3a">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4a">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5a">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6a">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7a">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1a">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2a">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3a">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4a">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5a">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6a">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7a">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Airman First Class" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Airman First Class" name="Airman First Class"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1b">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2b">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3b">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4b">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5b">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6b">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7b">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1b">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2b">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3b">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4b">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5b">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6b">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7b">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1b">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2b">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3b">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4b">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5b">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6b">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7b">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1b">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2b">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3b">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4b">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5b">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6b">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7b">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1b">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2b">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3b">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4b">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5b">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6b">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7b">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1b">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2b">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3b">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4b">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5b">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6b">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7b">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1b">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2b">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3b">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4b">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5b">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6b">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7b">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Senior Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Senior Airman" name="Senior Airman"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1c">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2c">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3c">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4c">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5c">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6c">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7c">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1c">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2c">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3c">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4c">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5c">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6c">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7c">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1c">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2c">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3c">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4c">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5c">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6c">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7c">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1c">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2c">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3c">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4c">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5c">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6c">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7c">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1c">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2c">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3c">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4c">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5c">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6c">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7c">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1c">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2c">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3c">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4c">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5c">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6c">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7c">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1c">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2c">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3c">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4c">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5c">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6c">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7c">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Staff Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Staff Sergeant" name="Staff Sergeant"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1d">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2d">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3d">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4d">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5d">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6d">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7d">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1d">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2d">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3d">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4d">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5d">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6d">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7d">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1d">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2d">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3d">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4d">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5d">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6d">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7d">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1d">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2d">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3d">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4d">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5d">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6d">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7d">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1d">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2d">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3d">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4d">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5d">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6d">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7d">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1d">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2d">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3d">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4d">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5d">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6d">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7d">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1d">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2d">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3d">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4d">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5d">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6d">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7d">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Senior Master Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Senior Master Sergeant" name="Senior Master Sergeant"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1e">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2e">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3e">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4e">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5e">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6e">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7e">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1e">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2e">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3e">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4e">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5e">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6e">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7e">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1e">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2e">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3e">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4e">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5e">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6e">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7e">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1e">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2e">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3e">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4e">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5e">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6e">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7e">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1e">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2e">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3e">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4e">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5e">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6e">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7e">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1e">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2e">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3e">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4e">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5e">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6e">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7e">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1e">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2e">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3e">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4e">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5e">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6e">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7e">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
     <div class="clear"></div><div id="error-message-style-sub-1"></div></div> 

जैसा कि मैंने कहा गया है, ऊपर के उदाहरण में जावास्क्रिप्ट कोड न मेरे लिए काम कर रहे हैं, और मैं जावास्क्रिप्ट के लिए काफी नया हूं (और एचटीएमएल में अत्यधिक अनुभवी नहीं) तो कोई सुझाव?

इसके अतिरिक्त, उपयोगकर्ता दूसरे ड्रॉपडाउन बॉक्स में चयन करने के बाद, मुझे ड्रॉपडाउन बॉक्स के नीचे प्रदर्शित करने के लिए पाठ की एक अद्वितीय पंक्ति (यानी उनके चयन के लिए अद्वितीय) चाहिए। यहाँ एक उदाहरण मैंने पाया है:

Toggle a hidden div when a particular dropdown option is selected/de-selected

हालांकि, फिर से, इस exaple के विपरीत मैं नहीं चाहता कि सिर्फ एक ही विकल्प पाठ प्रदर्शित करना चाहते हैं; मैं चयनित किसी भी विकल्प के लिए प्रदर्शित करने के लिए टेक्स्ट की एक अलग पंक्ति चाहता हूं। मैं इस काम को बनाने के लिए इस उदाहरण में कोड को संशोधित करने के बारे में कैसे जाउंगा?

मुझे पता है कि यह एक बड़ी परियोजना बनने की संभावना है, इसलिए मेरे लिए सबकुछ टाइप करने की चिंता न करें अगर आप मुझे कोड को संशोधित करने के लिए मुझे क्या करना है इसका एक नमूना दे सकते हैं ताकि यह ' सिर्फ एक विकल्प से अधिक प्रभावित करेगा। जैसा कि आप शायद इस पोस्ट के आकार से अनुमान लगा सकते हैं, मैं खुद को बहुत लंबी लंबाई के साथ लिखने में काफी सहज हूं।

किसी भी मदद की बहुत सराहना की जाएगी।

अग्रिम धन्यवाद।

+0

दूसरा उदाहरण वास्तव में काम करना चाहिए ... क्या आपके पास jsfiddle के लिए जावास्क्रिप्ट सक्षम है? – pyvi

+0

मेरा मतलब है कि यह मेरे लिए काम नहीं करता है जब मैं ऊपर अपने स्वयं के एचटीएमएल (यहां तक ​​कि jsfiddle में) के साथ जावास्क्रिप्ट का उपयोग करता हूं। जब मैं बस दिए गए उदाहरण को चलाता हूं तो यह ठीक काम करता है। – Scott

उत्तर

14

एक तरफ या दूसरा, आप पहले से ही समाप्त हो चुके हैं शायद सबसे आसान HTML मार्कअप इस काम के लिए उपयोग करने के लिए:

<select size="1" id="Rank" title="" name="Rank"> 
    <option value="">-Select Your Rank-</option> 
    <option value="Airman">Airman</option> 
    <option value="Airman First Class">Airman First Class</option> 
    <option value="Senior Airman">Senior Airman</option> 
    <option value="Staff Sergeant">Staff Sergeant</option> 
    <option value="Senior Master Sergeant">Senior Master Sergeant</option> 
</select> 

और फिर एक <element><option> से प्रत्येक संभावना के लिए कंटेनर।

<div> 
    // For Airman 
</div> 
<div> 
    // For Senior Airman 
</div> 

... आदि आदि ...

मैं सब कुछ निर्भर करता है कि जिस पर <option> चयन किया जाता है के लिए यह एक ही लेआउट का उपयोग करेंगे; अनन्य-पंक्ति-पाठ जो आप चाहते हैं, दूसरा-चयन-बॉक्स इत्यादि। मैं प्रत्येक को एक कंटेनर तत्व में लपेटूंगा, ताकि आप आसानी से सभी तत्वों को लक्षित कर सकें।

<div class="container"> 
    <div> 
     Line of text for Airman 
    </div> 
    <div> 
     Line of text for Senior Airman 
    </div> 
</div> 

<div class="container"> 
    <div> 
     <select> 
      <option>Airman Stuff</option> 
     </select> 
    </div> 
    <div> 
     <select> 
      <option>Senior Airman Stuff</option> 
     </select> 
    </div> 
</div> 

अब <div> से प्रत्येक के लिए एक पहचानकर्ता अजीब है हम मिल गया है, तो जब "Airman" चुना जाता है, हम जानते हैं कि जो <div> के हैं Airmans (ताकि हम उन लोगों को दिखाने के लिए पता है!)

<div class="container"> 
    <div class="airman"> 
     Line of text for Airman 
    </div> 
    <div class="senior-airman"> 
     Line of text for Senior Airman 
    </div> 
</div> 

<div class="container"> 
    <div class="airman"> 
     <select> 
      <option>Airman Stuff</option> 
     </select> 
    </div> 
    <div class="senior-airman"> 
     <select> 
      <option>Senior Airman Stuff</option> 
     </select> 
    </div> 
</div> 

और <select id="rank"> की <options> के लिए एक ही पहचानकर्ता जोड़ें:

<select size="1" id="Rank" title="" name="Rank"> 
    <option value="">-Select Your Rank-</option> 
    <option value="airman">Airman</option> 
    <option value="senior-airman">Senior Airman</option> 
</select> 

अब हम इस मार्कअप मिल गया है, जा लागू करने छिपाने/दिखाने के लिए vaScript इतना आसान है!

$(document).ready(function() { 
    $('#Rank').bind('change', function() { 
     var elements = $('div.container').children().hide(); // hide all the elements 
     var value = $(this).val(); 

     if (value.length) { // if somethings' selected 
      elements.filter('.' + value).show(); // show the ones we want 
     } 
    }).trigger('change'); // Setup the initial states 
}); 

हो गया; एक उदाहरण चेकआउट: http://jsfiddle.net/3UWk2/1/

अपनी टिप्पणी

कारण कोड की तरह आप काम नहीं किया था बदलने के लिए अपने प्रयास के लिए एक अद्यतन है, क्योंकि हम वर्तमान में कोई ईवेंट हैंडलर 2 स्तर तक <select> बक्से बाध्य मिल गया है ; केवल <select id="rank">

आपको दूसरी स्तर की नौसेना के लिए पहले स्तर की नौसेना के लिए जो कुछ भी किया है, उसे मूल रूप से दोहराने की आवश्यकता है। <select> के लिए #id चयनकर्ता का उपयोग करने के बजाय, .class का उपयोग करें; क्योंकि हम लक्षित करने के लिए एक से अधिक <select> तत्व, और #id 'मिल गया है अद्वितीय होना जरूरी:

$('.second-level-select').bind('change', function() { 
    var elements = $('div.second-level-container').children().hide(); // hide all the elements 
    var value = $(this).val(); 

    if (value.length) { // if somethings' selected 
     elements.filter('.' + value).show(); // show the ones we want 
    } 
}).trigger('change'); // Setup the initial states 

हम भी div.container का नाम बदलने के लिए, <select> बक्से एक दूसरे छुपा को रोकने के लिए किया है तत्वों।

चेक बाहर एक अद्यतन उदाहरण यहाँ: http://jsfiddle.net/3UWk2/3/

+0

बहुत बहुत धन्यवाद, मैट, यह बिल्कुल वैसा ही दिखता है जो मुझे चाहिए! – Scott

+0

वास्तव में, एक आखिरी बात; मैं दूसरे ड्रॉपडाउन में प्रत्येक विकल्प के लिए अद्वितीय-लाइन-ऑफ-टेक्स्ट प्रदर्शित करना चाहता हूं, पहले नहीं (यानी "एयरमैन सामान के लिए पाठ की रेखा," "सीनियर एयरमैन स्टफ के लिए पाठ की रेखा" आदि, नहीं "एयरमैन के लिए पाठ की रेखा"), और मैं केवल दूसरे ड्रॉपडाउन में एक विकल्प के बाद इसे प्रदर्शित करना चाहता हूं। मैंने आपके पहले कंटेनर में कक्षाओं को "एयरमैन-स्टफ" इत्यादि में बदलने की कोशिश की और फिर "एयरमैन स्टफ"

+1

@ स्कॉट: अपडेट के लिए मेरे उत्तर के नीचे की जांच करें :) – Matt

3

मेरा समाधान और सलाह AJAX का उपयोग करना होगा।यदि आपके पास बहुत सारे विकल्प हैं और प्रत्येक के लिए कई अन्य विकल्प हैं, तो उन्हें तुरंत लोड करने में कोई बात नहीं है। विचार एक AJAX अनुरोध भेजना और उचित विकल्प के साथ दूसरे चयन को अद्यतन करना है। आप डेटाबेस में प्रत्येक विकल्प के लिए उचित टेक्स्ट भी स्टोर कर सकते हैं .. इस तरह, आपके पास जो कुछ भी आप चाहते हैं वह है और आप उपयोगकर्ता को अनावश्यक चयन डाउनलोड करने के लिए मजबूर नहीं करते हैं

+1

यह दीर्घकालिक बनाए रखने के लिए भी एक आसान समाधान है। उन वेब पृष्ठों में चयन के बड़े सेट जो टॉगल ऑन या ऑफ हो जाते हैं, वे अन्य लोगों के लिए थोड़ा अधिक पाचन हो सकते हैं जिन्हें बाद में वेब पेज पर काम करना पड़ता है। – Felan

+0

मैं AJAX से परिचित नहीं हूं, लेकिन आपके उत्तर के लिए धन्यवाद, मैं इसमें देखूंगा और देख सकता हूं कि मैं किसके साथ आ सकता हूं। – Scott

7

वाह कि कोड का एक बहुत कुछ है ... लेकिन वास्तव में यह jQuery के साथ क्या करना वास्तव में आसान था (यह है कि अगर एक विकल्प है)। मेरा example देखें।

सबसे पहले आपको बस इतना करना है कि आईडी में रिक्त स्थान हटा दें। यह आमतौर पर बुरा है। दूसरा, आप आईडी के रूप में उन्हें चुनने वाली चुनिंदा सूची में उन मानों के आधार पर दिखाएं/छुपाएं।

jQuery (भूल नहीं jQuery लिंक, हालांकि शामिल करने के लिए करते हैं):

$("#Rank").change(function(){ 
    correspondingID = $(this).find(":selected").val() 
    $(".style-sub-1").hide(); 
    $("#" + correspondingID).show(); 
}) 
2

एचटीएमएल कोड पहले

<!-------first dropdown-----------> 
    <select name="make" id="elements"> 
     <option value="">-</option> 
     <option value="Satec" >Satec</option> 
     <option data-val='m2' value="Masibus" >Masibus</option> 
     <option data-val='m3' value="Pyrotech" >Pyrotech</option> 
     <option data-val='m4' value="Schneider" >Schneider</option> 

    </select> 

    <!---------second dropdown----------> 
    <select name="model" id="category"> 
     <option value="">-</option> 
     <option value="PM130" >PM130</option> 
     <option value="PM2160A" >PM2160A</option> 
     <option value="MFM101" >MFM101</option> 
     <option value="ABC" >ABC</option> 
    </select> 

शामिल js स्क्रिप्ट शामिल करने के बाद

<script> 
var category = document.getElementById('category'); 
document.getElementById('elements').onchange = function() { 
    var optionSelected = this.options[this.selectedIndex]; 
    if (optionSelected.textContent != '-') { 
    if (optionSelected.dataset.val === 'm2') { 
     category.value = 'PM2160A'; 
    } 
    else if (optionSelected.dataset.val === 'm3') { 
    category.value='MFM101'; 
} 
    else if (optionSelected.dataset.val === 'm4') { 
    category.value='ABC'; 
} 
    else { 
     category.value = 'PM130'; 
    } 
    } else { 
    category.value = ''; 
    } 
} 
</script> 

यह काम सुनिश्चित करेंगे।

संबंधित मुद्दे