Dropdown menu Redirection using AJAX and JQuery or Javascript

By : Anne
Source: Stackoverflow.com
Question!

I am trying to create a dropdown menu with numbers 1 to 6, and when a user selects a number and clicks the button it will redirect the user to the webpage associated with that number selection. The redirected content will display at . I would like to do this using AJAX and jQuery or javascript. I can get a redirection if I give an id to this line: , but that is not what my ultimate goal is. It works for redirection but not to the corresponding webpage associated with a number. I tried assigning id's to each option selection but manipulating the ajax.js file with those id's does not provide any redirection. I am not sure how to "bind", "focus" or "select" a particular dropdown selection in the AJAX code. I may need to create a loop and a variable in the AJAX code or a switch statement to properly redirect to the correct associated webpage with the number selected in the dropdown menu once I am able to get the option selection to "bind", "focus" or "select". I am not sure if AJAX allows a loop or switch in the code, or I may need to create an array, or create an external file for AJAX to select from. If you have any suggestions or ideas as to how to make this work, please let me know. Thank you very much. Have a nice weekend. Anne

In dropdown.html

<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<body>

<form name="redirect">
<select name="selection">
  <option id="one" value="pageone.php">1</option>
  <option id="two" value="pagetwo.php">2</option>
  <option id="three" value="pagethree.php">3</option>
  <option id="four" value="pagefour.php">4</option>
 <option id="five" value="pagefive.php">5</option>
 <option id="six" value="pagesix.php">6</option>
</select>

<input type="button" value="Click Here!" id="btn" >
<div id="content"></div>
</form>
<script type='text/javascript' src='js/ajax.js'></script>
</body>
</html>    

In js/ajax.js (this works)

$('#btn').click(function() {
    $.ajax({
        url: 'redirpage.html',
        success: function(data) {
            $('#content').html(data);
        }
    });
});​  

In js/ajax.js (this doesn't work, neither do focus(), select() or other event handlers)

$('#one').bind(function() {
    $.ajax({
        url: 'pageone.php',
        success: function(data) {
            $('#content').html(data);
        }
    });
});​
By : Anne


Answers

If I understand it correctly, you want to make an ajax call to the pages that are the values of the select? And they return data that should be displayed in #content?

What kind of data is returned - simple html?

In this case I'd try this:

$('select[name=selection]').change(function(){
  var url = $(this).val();
  $.post(url, function(data) {
    $('#content').html(data);
  });
});

You don't need the IDs for the options.

By : m7o


This video can help you solving your question :)
By: admin