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

Dropdown menu Redirection using AJAX and JQuery or Javascript

本文关键字：JQuery Javascript AJAX 重定向 下拉菜单      更新时间：2023-09-26

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

在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);
        }
    });
});​

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

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

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

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

选项不需要ID。

相关文章：