组合框内部 Link 选择器 HTML

Question

I'm trying to include a combo box on my websites homepage, that will jump to specific internal links when the correct value is selected.到目前为止，我有这个测试代码，但我还没有成功！谁能让我知道我哪里出错了？非常感谢！

<body>
    <select>
      <option><a href="#Nature">Nature</a></option>
      <option><a href="#Motion">Motion</a></option>
      <option><a href="#Potraiture">Portraiture</a></option>
      <option><a href="#Stilllife">Still Life</a></option>
    </select>

    <a name="Nature"><p>This is the Nature section</p></a>
    <a name="Motion"><p>This is the Motion section</p></a>
    <a name="Portraiture"><p>This is the Portraiture section</p></a>
    <a name="Stilllife"><p>This is the Still Life section</p></a>

</body>

Answer 1

您缺少 javascript 代码来处理选择中的更改，以及要采取的操作（转到另一个 url）。

var selectedOption = $("#DropDownList1 option:selected").text();

$("#DropDownList1").change(function(e) {
      url: "yoursite.com/default.aspx?#" + selectedOption;
      window.location = url;
});

Answer 2

你很接近，但不幸的是，锚点 (<a>) 标签在 <select> <option> 标签内不起作用。为了解决这个问题，我们可以在选项值上使用 javascript 函数，如下所示：

<select onchange="document.getElementById(this.value).scrollIntoView();">
      <option value="Nature">Nature</option>
      <option value="Motion">Motion</option>
      <option value="Potraiture">Portraiture</option>
      <option value="Stilllife">Still Life</option>
</select>

<div id="Nature"><p>This is the Nature section</p></div>
<div id="Motion"><p>This is the Motion section</p></div>
<div id="Portraiture"><p>This is the Portraiture section</p></div>
<div id="Stilllife"><p>This is the Still Life section</p></div>

请注意，我还将 <a> 标签更改为 <div>s。这对我来说似乎在语义和句法上更正确，显然，如果我不正确，请随时恢复该更改。

组合框内部 Link 选择器 HTML

Combo Box Internal Link Selector HTML

html

combobox

internal

hyperlink

selector