ड्रॉपडाउन फॉर्म

Question

से चयन पर लोड पेज मैं एक ड्रॉप डाउन मेनू बनाने की कोशिश कर रहा हूं जो मुझे विभिन्न वेबपृष्ठों पर ले जाता है। अभी यह स्थापित है ताकि आप अपना चयन कर सकें और फिर आप "जाओ" बटन दबाएं और फिर यह आपको उचित लिंक पर ले जाए। मैं इसे समझने की कोशिश कर रहा हूं कि जब आप अपना चयन करते हैं तो इसे स्वचालित रूप से चला जाता है और आपको "जाओ" बटन को धक्का देने की आवश्यकता नहीं होती है।

<p align="center"> 
<form name="jump" class="center"> 
<select name="menu"> 
<option value="#">Select an option</option> 
<option value="/link1.shtml">Link 1</option> 
<option value="/link2.shtml">Link 2</option> 
<option value="/link3.shtml">Link 3</option> 
</select> 
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO"> 
</form> 
</p> 

कोई मदद या स्पष्टीकरण के लिए लिंक बहुत अच्छा होगा:

यहाँ मैं क्या है। धन्यवाद!

Answer 1

निम्नलिखित का प्रयास करें:

<select onchange="location = this.options[this.selectedIndex].value;"> 
    <option>Please select</option> 
    <option value="http://www.apple.com/">Apple</option> 
    <option value="http://www.bbc.com">BBC</option> 
    <option value="http://www.facebook.com">Facebook</option> 
</select>​ 

आप 'onchange' 'onsumbit'

Answer 2

बाहर चेक jQuery .change()

<script> 
    $('select.menu').change(function(e){ 
     // this function runs when a user selects an option from a <select> element 
     window.location.href = $("select.menu option:selected").attr('value'); 
    }); 
</script> 

Answer 3

इस तरह कुछ मदद कर सकता है के बजाय था के लिए क्या देख रहे थे - मूल रूप से आप बस एक चुनिंदा घटना को चुनने के लिए जोड़ते हैं ताकि जब कोई नया विकल्प चुना जाए तो यह पृष्ठ को स्थान पर अग्रेषित करेगा।

<p align="center"> 
<form name="jump" class="center"> 
<select name="menu" onchange="gotoPage(this)"> 
<option value="#">Select an option</option> 
<option value="/link1.shtml">Link 1</option> 
<option value="/link2.shtml">Link 2</option> 
<option value="/link3.shtml">Link 3</option> 
</select> 
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO"> 
</form> 
</p> 

<script type="text/javascript"> 
function gotoPage(select){ 
    window.location = select.value; 
} 
</script> 

Answer 4

मैं सुझाव है कि आप जावास्क्रिप्ट ढांचे का उपयोग कर jQuery के रूप में यह वास्तव में अपने जीवन बहुत आसान जब यह जावास्क्रिप्ट की बात आती है कर देगा शुरू करते हैं।

जब आप jQuery स्थापित किया है और आप वेब पेज में सेटअप आप इस तरह कुछ करने के लिए सक्षम होना चाहिए है:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#selection").change(function() { 
      location = $("#selection option:selected").val(); 
     }); 
    }); 
</script> 

<p align="center"> 
    <form name="jump" class="center"> 
     <select name="menu" id="selection> 
      <option value="#">Select an option</option> 
      <option value="/link1.shtml">Link 1</option> 
      <option value="/link2.shtml">Link 2</option> 
      <option value="/link3.shtml">Link 3</option> 
     </select> 
    </form> 
</p> 

Answer 5

जाहिर

पार्टी यहां के सुपर देर हो गई, लेकिन जब से मैं एक ही यह पता लगाने की कोशिश कर रहा था चीज और करने में सक्षम था, मैं यहां कैसे पोस्ट करूंगा।

अन्य उत्तरों ने जब आप अपना चयन तत्व विकल्प बदलते हैं तो लिंक को लोड करते हैं, लेकिन मूल रूप से आपने चयन करने के बाद इसे बटन के साथ करने के लिए कहा था। यह मेरे लिए काम किया:

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     var newUrl = ""; 
 
     $("#picksite").change(function() { 
 
      $newUrl = $("#picksite option:selected").val(); 
 
     }); 
 
     $("#executelink").click(function() { 
 
      location = $newUrl ; 
 
     }); 
 
    }); 
 
</script> 
 

 
<select id="picksite"> 
 
    <option value="">Pick A Website</option> 
 
    <option value="http://google.com">Google</option> 
 
    <option value="http://facebook.com">Facebook</option> 
 
    <option value="http://twitter.com">Twitter</option> 
 
    <option value="http://gmail.com">Gmail</option> 
 
</select> 
 

 
<button id="executelink">Go To Site</button>