Question

我建立了一个单页网站，按部分细分，每个部分都有ID。我的客户希望能够使用搜索栏中的href（＃'s）导航到每个部分，如

www.website#gohere

根据我的章节，这很有效。我的问题是他们只是扔了一个曲线球，我不知道该怎么做 -

在我的页面中，在某个名为#labSearch的部分中，我有一个使用jQuery在csv文件中填充的下拉列表：

var location = arrayOfEvents[i][0];

    if (location != prevLoc)
    {
    select.innerHTML += "<option id = "+"test" +" value=\"" + location + "\">" + location + "</option>";
    }

如果选择下拉选项，则会根据下拉列表的值显示某些div。他们需要它，所以说下拉选项是达拉斯，当他们去：

website.com#Dallas

将它们带到带有dropdwin的部分（这是#labSearch）并且就像用户选择了Dallas选项一样，这意味着显示了正确的div。我已经尝试过，因为你可以看到上面给出了选项ID，但这没有任何作用。

如何在搜索栏中创建一个href选择某个下拉选项？这可能吗？

为什么选项ID不起作用？

以下是我的labSearch部分中的下拉代码：

<form id="locationForm" style = "width: 70%; margin: auto; padding-bottom: 30px;">
  <select class = "form-control" id="selectNumber" style = "">
    <option>Choose a location</option>
  </select>


</form>

编辑：在文档准备就绪或我拥有的任何内容之后，我的javascript结束时确定：

var selectHashOption = function () {
        console.log("hash changed");
    var select1 = document.getElementById('selectNumber');
    var parts = location.href.split('#');
    if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
      console.log("HASH="+hash);
        select1.value = hash;   // Select the option in the dropdown list
        //select1.onchange();
      dropdownChange();
      // Trigger the onchange event handler
    }
};

window.onhashchange = selectHashOption;
});

    </script>

这一切都很好，除了我无法调用dropdownChange - 我得到它是未定义的，但是我已经在文件范围声明了变量：

<script>

var dropdownChange;

然后将其设置为文档就绪：

$(".form-control").change(function () {

                  dropdownChange = function()
                  {
                    //stuff

这里解释了Why can I not define functions in jQuery's document.ready()?，我就这样做了。这是我的哈希更改窗口之前的事情。我甚至无法调用onchange，因为这也是未定义的。我该怎么办？

编辑2：

我现在最初在范围级别声明我的func，然后在此处设置：

dropdownChange = function () {
}
$(".form-control").change(dropdownChange);

在我尝试后的哈希内容中：

if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
      console.log("HASH="+hash);
        select1.value = hash;   // Select the option in the dropdown list
        select1.onchange();

    }

并且相同，此功能未定义。然后我直接用：

调用该函数

if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
      console.log("HASH="+hash);
        select1.value = hash;   // Select the option in the dropdown list
        dropdownChange();

    }

调用该函数但是这里的值（I console.log(this.value)）未定义 -

Answer 1

您可以通过设置下拉列表的value属性来选择一个选项。我假设选项值与用户键入的URL的哈希部分匹配。

对于此HTML标记：

<select id="select1">
    <option value="Dallas">Dallas</option>
    <option value="New York">New York</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Chicago">Chicago</option>
</select>

您可以使用以下代码选择与URL的哈希部分匹配的选项：

var selectHashOption = function () {
    var select1 = document.getElementById('select1');
    var parts = location.href.split('#');
    if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
        select1.value = hash;   // Select the option in the dropdown list
        select1.onchange();     // Trigger the onchange event handler
    }
};

window.onhashchange = selectHashOption;

选择该选项后，我调用onchange来触发下拉列表的事件处理程序。根据事件处理程序的设置方式，您可能需要采用不同的方式，如How can I trigger an onchange event manually?中所述。

我需要监控onhashchange事件，使其在我的测试代码中运行，正如您在代码示例的最后一行所看到的那样。

如何在搜索栏中添加一个href选择下拉列表中的选项？

1 个答案: