链接到下拉列表中的选择

Link to a selection in a dropdown

本文关键字：选择 下拉列表 链接      更新时间：2023-09-26

当用户点击一个链接时，我想将他们发送到另一个带有下拉列表的页面，预先选择与他们点击的链接相对应。 例如，如果他们选择指向"商品"的链接，我想将它们发送到另一个页面，其中的下拉菜单为"商品"选择，而不是其他选择类别，如"全部"，"销售"，"建筑"等。 我该怎么做？

您可以通过向第一页链接添加参数，然后在第二页上解析它们以在选择输入中设置所选选项来实现此目的，请尝试以下示例：

页1.html

<html>
<body>
<a href="page2.html?category=merchandise">Merchandise</a>
<a href="page2.html?category=all">All</a>
<a href="page2.html?category=sales">Sales</a>
<a href="page2.html?category=architecture">Architecture</a>
</body>
</html>

页2.html

<html>
<head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script>
    $(document).ready(function(){
        var selectedCategory = getUrlParameter("category");
        $('select').val(selectedCategory);
    });
    function getUrlParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) 
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) 
            {
                return sParameterName[1];
            }
        }
    }    
    </script>
</head>
<body>
<select>
<option value="merchandise" >Merchandise</option>
<option value="all" >All</option>
<option value="sales" >Sales</option>
<option value="architecture" >Architecture</option>
</select>
</body>
</html>

你可以试试这个：

测试.php

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
  $(document).ready(function(){
$('a').click(function(){
      localStorage.setItem("category",$(this).text());
});
  });
</script>
</head>
<body>
<a href="submit.php">Merchandise</a>
<a href="submit.php">All</a>
<a href="submit.php">Sales</a>
<a href="submit.php">Architecture</a>
 </body>
</html>

提交.php

<html>
<head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script>
    window.onload = function() {
        $('select option[value="' + localStorage.getItem("category") + '"]').prop('selected', true);
    }
    </script>
</head>
<body > 
<select>
<option value="merchandise" >Merchandise</option>
<option value="all" >All</option>
<option value="sales" >Sales</option>
<option value="architecture" >Architecture</option>
</select>
</body>
</html>
相关文章：