javascript - 显示基于链接的选择框选项

Question

我有一个 JSP 页面。我创建了一些链接。

<div align="center" style="border: 1px solid #ddd; position:absolute;left:20px; top:100px; width: 150px;">
    <br>
    <a class="applicationdata" href="#" id="1">Organization Data</a><br>
    <a class="applicationdata" href="#" id="2">Business Units</a><br>
    <a class="applicationdata" href="#" id="3">Applications</a><br>
    <a class="applicationdata" href="#" id="4">Data Entity</a><br>
    <br>
</div>

与此类似，我创建了许多链接。我还有一个选择框

<label class="control-label" for="dataloadType">Data load Type:</label>
<select id="dataloadType" name="dataloadType">
    <option value="fromDB">From Database</option>
    <option value="fromFile">From File</option>
    <option value="email">E-mail</option>
    <option value="webServices">Web Services</option>
</select>

我想要的是，当我单击Organization data 时，选择框应该只显示第一个和第二个选项(来自数据库和来自文件)，如果我选择业务单位，我只想显示接下来的两个选项，如果我选择第三个，我需要显示所有选项，如果我点击最后一个链接，它应该只显示第一个和第三个选项。如果只有两个或三个链接我可以使用很多选择框，但我有超过 20 个链接。因此，很难为所有太常见的选项编写代码。

那么有什么办法可以做到这一点吗？有人可以提供想法吗？

谢谢

Answer 1

如果您只想显示范围内的选项，您可以创建包含所有选项和存储为类的选项“类型”的隐藏选择:

<option class="organization applications data" value="fromDB">From Database</option>
<option class="organization applications" value="fromFile">From File</option>
<option class="business applications data" value="email">E-mail</option>
<option class="business applications" value="webServices">Web Services</option>

您可以通过数据属性为链接添加“类型”:

<a data-selectType="organization" class="applicationdata" href="#" id="1">Organization Data</a><br>
<a data-selectType="business" class="applicationdata" href="#" id="2">Business Units</a><br>
<a data-selectType="applications" class="applicationdata" href="#" id="3">Applications</a><br>
<a data-selectType="data" class="applicationdata" href="#" id="4">Data Entity</a>

然后在链接上单击将它们克隆到您想要的选择。

此处示例 http://jsbin.com/otocum/1/