引用外部选项值或函数

在我的代码中，链接的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();});

当单击首先导航到函数页面的特定(外部(链接时。

您必须将

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

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

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

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

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

相关内容

最新更新

热门标签：