Question

在我的代码中，链接的onclick事件会选择一个下拉选项：

<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

  <script type="text/javascript">
          $(document).ready(function(){
            $(document).on("click", "#aaa", function(){
              $("select").val("aaa").change();
            });
          });
        </script>
		
  <script type="text/javascript">
          $(document).ready(function(){
            $(document).on("click", "#bbb", function(){
              $("select").val("bbb").change();
            });
          });
        </script>

  <script type="text/javascript">
          $(document).ready(function(){
            $(document).on("click", "#ccc", function(){
              $("select").val("ccc").change();
            });
          });
        </script>
		
</head>
<body>

<p><a id="aaa">Select Option 1</a></p>
<p><a id="bbb">Select Option 2</a></p>
<p><a id="ccc">Select Option 3</a></p>


<select>
        <option>Select</option>
            <option value="aaa">Option 1</option>
            <option value="bbb">Option 2</option>
            <option value="ccc">Option 3</option>
        </select>
</body>
</html>

问题：

我正在尝试添加指向导航到具有上述代码的页面的外部页面的链接，并自动选择例如备选方案2

从某种意义上说，我正试图执行，例如以下功能

function() $("select").val("bbb").change();});

点击首先导航到该功能页面的特定（外部）链接。

Answer 1

您将不得不将某种参数发送到该页面可以读取的第二页。最简单的方法是在链接上添加一个查询字符串，如下所示：

<a href="http://www.someDomain.com/page2.html?option=2">Page 2</a>

然后在“page2.html”上，您需要阅读查询字符串并采取相应措施：

// This is the code that would be on page2.html
document.addEventListener("DOMContentLoaded", function(){

  // Assume that the current page was arrived at with the URL: http://someDomain.com/page2.html?option=2
  // That is the string that will be in window.location.href
  //var theQueryString = window.location.href;

  // For testing purposes we'll use it as a variable:
  var theQueryString = "http://someDomain.com/page2.html?option=2".split("?")[1]; 
  var optionNumber = theQueryString.split("=")[1];
  console.log(theQueryString, optionNumber);
  
  if(optionNumber === "2"){
    // You can do whatever you need to do now that you know what the parameter 
    // was that was passed from the first page:
    document.getElementById("foo").selectedIndex = optionNumber - 1; 
    
    doSomethingAwesome();
  }

  function doSomethingAwesome(){ alert("You Did It!"); }

});

<select id="foo">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>      
</select>

Answer 2

有很多不同的方法可以解决这个问题。推荐的方法假设您可以访问/控制后端服务器到此页面，您可以在传递某个URL参数（即?selection=2）时将某个变量加载到模型中，并且在该页面中预设该变量时模型，您可以在default元素上设置select参数。

但是，如果您只能控制前端，可以使用document.location检查URL参数或哈希值，然后从那里做出决定。

例如，将外部网页上的链接设为http://www.myurl.com/mypage#option2。然后在<script>标记中，您可以检查document.location.hash中的值option2，然后调用相应的jQuery函数来更改select元素。

引用外部选项值或函数

2 个答案: