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

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>";
    }

selected 下拉选项时，某些 div 会根据下拉菜单的值显示。他们需要它，以便说下拉选项是达拉斯，当他们去的时候：

website.com#Dallas

它将他们带到带有 dropdwin 的部分（这是 #labSearch），就像用户已经 selected Dallas 选项一样，这意味着显示正确的 div。正如您在上面看到的那样，我已尝试提供选项 ID，但这没有任何作用。

如何在搜索栏 select 中为某个下拉选项创建一个 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()?，我照他们做的做了。这是在我的哈希更改 window 之前。我什至不能调用 onchange 因为它也是未定义的。我能做什么？

编辑 2：

我现在在范围级别声明了我的函数，然后在此处设置：

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 属性来 select 一个选项。我假设选项值与用户输入的 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>

您可以 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;

选项被 select 编辑后，我调用 onchange 来触发下拉列表的事件处理程序。根据事件处理程序的设置方式，您可能需要以不同的方式进行操作，如 How can I trigger an onchange event manually?.

中所述

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

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

How to make a href appended in search bar select option in dropdown?

html

javascript

jquery

href