使用 AJAX 和 JQuery 或 Javascript 的下拉菜单重定向答案

【问题标题】：Dropdown menu Redirection using AJAX and JQuery or Javascript使用 AJAX 和 JQuery 或 Javascript 的下拉菜单重定向
【发布时间】：2012-08-14 15:33:11
【问题描述】：

我正在尝试创建一个包含数字 1 到 6 的下拉菜单，当用户选择一个数字并单击该按钮时，它会将用户重定向到与该数字选择相关联的网页。重定向的内容将显示在。我想使用 AJAX 和 jQuery 或 javascript 来做到这一点。如果我给这一行提供一个 id ，我可以获得重定向：但这不是我的最终目标。它适用于重定向，但不适用于与数字关联的相应网页。我尝试为每个选项选择分配 id，但使用这些 id 操作 ajax.js 文件不会提供任何重定向。我不确定如何在 AJAX 代码中“绑定”、“聚焦”或“选择”特定的下拉选择。我可能需要在 AJAX 代码或 switch 语句中创建一个循环和一个变量，以便在我能够将选项选择设置为“绑定”、“焦点”或“选择”。我不确定 AJAX 是否允许代码中的循环或切换，或者我可能需要创建一个数组，或者创建一个外部文件供 AJAX 选择。如果您对如何使这项工作有任何建议或想法，请告诉我。非常感谢。祝你周末愉快。安妮

在 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>

在 js/ajax.js 中（可行）

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

在 js/ajax.js 中（这不起作用，focus()、select() 或其他事件处理程序也不起作用）

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

【问题讨论】：

重定向是什么意思？

标签： javascript ajax jquery redirect

【解决方案1】：

如果我理解正确，您想对作为选择值的页面进行 ajax 调用吗？他们返回的数据应该在#content 中显示？

返回什么样的数据——简单的html？

在这种情况下，我会试试这个：

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

您不需要选项的 ID。

【讨论】：

您好，非常感谢您，您的速度非常快，您的代码可以正常工作。 :)