Page2.html

pandas.Series

现在，从“Page1.html”，我们有一个像

这样的链接

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

所以目标是：

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

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

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

有什么想法可以做到这一点吗？

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

运行代码段将选择纽约作为城市。

Answer 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')
}

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

我认为这样的事情会起作用。不过，我还没有测试过它。

祝你好运。

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

Page2.html

Page1.html

3 个答案: