Button on a click, select a selection value and do something

Question

<div class="selCont"> <h2>pick an option</h2> <select id="my-dropdown" name="my-dropdown"> <option value="0">Please Select</option> <option value="1">West</option> <option value="2">Land</option> <option value="3">Easter</option> <option value="4">Springtime</option> <option value="5">Celtic</option> <option value="6">Spectacular/</option> <option value="7">Weekend</option> <option value="8">Dark</option> <option value="9">Treasures</option> </select> <button class="go-btn" type="submit"> Go </button> </div> 

Thus, basically, I want the user to be able to select an option, and by clicking the "Progress" button, to run the script and see the value of the drop-down list and use the value to send them to the corresponding page.

I tried a few things, but so far it is not hanging too well. Any help was appreciated as always.

EDIT

http://jsfiddle.net/TmfyC/ - this is what has been done recently with the help of one of the comments.

* WHAT I USED FOR PEOPLE WHO MAY BE ADVANTAGES *

 $('.go-btn').click(function() { window.location = $('#my-dropdown').val(); }); 

This is what I ended up doing, then assigned a value as the URL of my pages. It seems to work as a pleasure. Thanks for helping the guys.

Answer 1

2 things: http://jsfiddle.net/xSyF2/1/ OR http://jsfiddle.net/xSyF2/ p>

code

 $('.go-btn').click(function() { var selected = $('#my-dropdown option:selected'); alert(" If you want text ==>" + selected.html()); });​ 

OR

 $('.go-btn').click(function() { alert(" If you just want value ==>" + $('#my-dropdown').val()); });​ 

Answer 2

Here is an example that gets the value and redirects the browser to another page with the identifier selection passed in the query string.

 function doSomething() { var seleciton = parseInt($("#my-dropdown").val()); if(isNaN(selection) || selection <= 0) // Additional verification { alert("Please select valid option."); return; } window.location.href = 'http://somewhereelse.com/something?id=' + selection; } 

Answer 3

Here is a quick example of a way to do this using regular javascript, not jquery.

 <script type="text/javascript"> function goToProperPage() { var url; var location = document.getElementById("my-dropdown").selectedIndex; if (location == 1) { url = 'http://www.page.com/west'; } else if (location == 2) { url = 'http://www.page.com/land'; } window.location.href=url; } </script> <div class="selCont"> <h2>pick an option</h2> <select id="my-dropdown" name="my-dropdown"> <option value="0">Please Select</option> <option value="1">West</option> <option value="2">Land</option> <option value="3">Easter</option> <option value="4">Springtime</option> <option value="5">Celtic</option> <option value="6">Spectacular/</option> <option value="7">Weekend</option> <option value="8">Dark</option> <option value="9">Treasures</option> </select> <button class="go-btn" type="submit" onclick="javascript:goToProperPage();"> Go </button> </div> 

Answer 4

 ​$('.go-btn').click(function() { var selected = $('#my-dropdown option:selected'); if (selected.length) { // Do something with your selection alert(selected.val()); } });​​​​​​​​​​​​​​​​​​ 

Working jsfiddle

Answer 5

I think that should be enough.

 $(".go-btn").on('click',function(){ alert($("#my-dropdown").val()); }); 

Answer 6

 $('.go-btn').click(function(){ if($('#my-dropdown').val() == 0 ){ alert('Please select an option'); return false; } // do what you want here });