下拉菜单使用AJAX和JQuery或Javascript进行重定向

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. 我正在尝试创建一个数字1到6的下拉菜单，当用户选择一个数字并单击该按钮时，它将把用户重定向到与该数字选择相关的网页。 The redirected content will display at . 重定向的内容将显示在。 I would like to do this using AJAX and jQuery or javascript. 我想使用AJAX和jQuery或javascript做到这一点。 I can get a redirection if I give an id to this line: , but that is not what my ultimate goal is. 如果我给以下行提供ID，则可以得到重定向：但这不是我的最终目标。 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. 我尝试将id分配给每个选项选择，但是使用这些id操纵ajax.js文件不会提供任何重定向。 I am not sure how to "bind", "focus" or "select" a particular dropdown selection in the AJAX code. 我不确定如何在AJAX代码中“绑定”，“聚焦”或“选择”特定的下拉选择。 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". 我可能需要在AJAX代码或switch语句中创建一个循环和一个变量，以便在能够将选项选择为“绑定”，“焦点”后，使用下拉菜单中选择的数字正确地重定向到正确的关联网页。 ”或“选择”。 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. 我不确定AJAX是否允许循环或切换代码，或者我可能需要创建一个数组或创建一个外部文件供AJAX选择。 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 在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) 在js / ajax.js中（可行）

$('#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) 在js / ajax.js中（这不起作用，focus（），select（）或其他事件处理程序均不起作用）

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

Answer 1

If I understand it correctly, you want to make an ajax call to the pages that are the values of the select? 如果我理解正确，那么您想对作为select值的页面进行ajax调用吗？ And they return data that should be displayed in #content? 它们返回应该显示在#content中的数据？

What kind of data is returned - simple html? 返回什么样的数据-简单的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. 您不需要这些选项的ID。

下拉菜单使用AJAX和JQuery或Javascript进行重定向

问题描述

1 个解决方案

解决方案1
1 2012-08-18 12:31:40

下拉菜单使用AJAX和JQuery或Javascript进行重定向

问题描述

1 个解决方案

解决方案1 1 2012-08-18 12:31:40

解决方案1
1 2012-08-18 12:31:40