Question

我正在尝试在我的网站主页上添加一个组合框，当选择了正确的值时，它将跳转到特定的内部链接。到目前为止我有这个测试代码，但我还没有成功！谁能让我知道我哪里错了？非常感谢提前！

<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代码来处理选择中的更改，以及要采取的操作（转到其他网址）。

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。这对我来说在语义和句法上看起来更正确，显然如果我不正确，可以随意恢复这种改变。

组合框内部链接选择器HTML

2 个答案: