如何使用 JavaScript 跳转到特定页面的某些下拉列表的特定值？答案

【问题标题】：How to jump to a particular page's some drop-down's particular value using JavaScript?如何使用 JavaScript 跳转到特定页面的某些下拉列表的特定值？
【发布时间】：2017-07-25 19:16:06
【问题描述】：

假设我们有一个类似“Page2.html”的下拉菜单：

Page2.html

<div id="myDropDownLink">
    <select id="first-drop" name="first-drop">
        <option value="Select a State">Select a Steate</option>
        <option value="NY">New York</option>
        <option value="NJ">New Jersey</option>
    </select>
</div>

现在，从“Page1.html”，我们有一个类似的链接

Page1.html

<a href="abc.html" id="mylink">go to page 1</a>

所以目标是：

点击该链接后，它将转到“Page2.html”，它将选择第二个下拉值并被选中。例如，它将选择第二个下拉值，即“NJ”之一。我们可以以编程方式进行吗？

我可以转到特定的页面下拉位置。但我未能从下拉列表中选择第二个值。

window.location.href = forwardedWebsiteLink + "?" + "#first-drop";

任何想法可以做到这一点？

【问题讨论】：

您从哪里获得应该选择该特定值的信息？是从某个地方访问的，还是打算硬编码它？
刚才，我需要静态/硬编码值。如果我能得到硬编码的值，以后我可以动态地做。想想上面的情况，如果用户点击“转到第1页”，它会转到第一个.html，并将值更改为“NU”，即“第2页”

标签： javascript jquery

【解决方案1】：

您可以结合两件事：URI 锚点（在您的 uri 中添加 #）和 GET 参数（? 后跟值）以生成类似 example.com#first-drop?firstDropDown=nj 的内容

在 JavaScript（在 page2.html 上）中，您所要做的就是：

//Run the script on page load.
window.onload = function() {
  var url = window.location.href;

  //Let me cheat since we don't have page1 and page2 in this example...
  url += "#firstDropDown?firstDropDown=ny";

  // Select the text after the # and before the ? symbol.
  var dropDown = url.substring(url.indexOf('#') + 1, url.indexOf('?') - 1);
  
  // Select the text after the ? symbol
  var selectedOption = url.substring(url.indexOf('?') + 1);

  // Filter the dropdown's ID and its value into an object.
  selectedOption = {
    elem: selectedOption.substring(0, selectedOption.indexOf('=')),
    value: selectedOption.substring(selectedOption.indexOf('=') + 1)
  };

  // Get the dropdown DOMElement in the page so we can change the selectedIndex.
  dropDown = document.querySelector('#' + selectedOption.elem);
  
  var index = 0, selectedIndex = 0;

  // Loop through dropDown's children element to find the right one.
  dropDown.childNodes.forEach(function(elem, i) {
    // Make sur to look for DOMElement nodes only.
    if (elem.nodeType == 1) { 

      if (elem.value === selectedOption.value) {
        elem.setAttribute("selected", "selected");
        selectedIndex = index;
        return true;
      }
      index++;
    }
  });
  // Now that we have the right index, let's make sure it's selected.
  dropDown.selectedIndex = selectedIndex;
}

<select id="firstDropDown">
  <option value="nj">New Jersey</option>
  <option value="ny">New York</option>
  <option value="la">Los Angeles</option>
</select>

运行 sn-p 将选择纽约作为城市。

【讨论】：

从技术上讲，查询字符串位于哈希后的 URI 被认为是格式错误的，但我想这可以避免无意中向服务器发送 GET 查询的潜在混乱。
很高兴知道。感谢您提供的信息（我一直认为查询字符串在哈希之后）。
记住正确顺序的一个好方法是记住服务器永远不会看到哈希，但它确实看到查询字符串，假设它放置正确。当发送到互联网时，URI 在 # 之前被截断。

【解决方案2】：

当您重定向时，您可以传递 location.search 上的值，该值可以使用此处描述的众多方法中的任何一种进行解析：

在第 1 页上，您可以像这样传递参数：

window.location.href = forwardedWebsiteLink + "?first-drop=NJ#first-drop"

在第 2 页，您可以使用 jQuery BBQ $.deparam() 执行类似的操作：

if (location.hash === '#first-drop') {
  var value = $.deparam.querystring()['first-drop']

  $('#first-drop [value]')
    .removeAttr('selected')
    .filter(function () { return this.value === value })
    .attr('selected', 'selected')
}

【讨论】：

【解决方案3】：

我会稍微修改一下第二页的链接：

<a href="page2.html?state=ny" id="mylink">New York</a>

然后在第 2 页，我将添加一些在页面加载时运行的 JavaScript。

let params = (new URL(document.location)).searchParams;
let state = params.get("state");

（更多信息请参见searchParams）

然后你会得到一个对你的选择框的引用：

let dropdown = document.querySelector('#first-drop');

然后将值设置为传入的状态。

dropdown.value = state;

我不记得该值是否区分大小写，但为了以防万一，请稍微修改您的下拉列表：

<div id="myDropDownLink">
    <select id="first-drop" name="first-drop">
        <option value="Select a State">Select a Steate</option>
        <option value="ny">New York</option>
        <option value="nj">New Jersey</option>
    </select>
</div>

我认为这样的事情会奏效。不过，我还没有测试过。

祝你好运。

【讨论】：