根据链接显示选择框选项

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>

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

那么有什么办法可以实现这个目标吗？ 有人可以提出想法吗？

谢谢

Answer 1

如果只想显示范围内的选项，可以创建包含所有选项的隐藏选择，并将选项“type”存储为类：

<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>

您可以通过data属性为链接添加“type”：

<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/

Answer 2

这可能比你想象的要容易。

这是工作小提琴：
http://jsfiddle.net/uvwqL/2/

这是jquery：

function setOptions(o1,o2,o3,o4){
        $("#o1").prop("selected", o1);
        $("#o2").prop("selected", o2);        
        $("#o3").prop("selected", o3);
        $("#o4").prop("selected", o4);
}

$().ready(function() {
    $("#1").on("click", function(){
        setOptions(true,true,false,false);
    });
    $("#2").on("click", function(){
        setOptions(false,false,true,true);
    });
    $("#3").on("click", function(){
        setOptions(true,true,true,true);        
    });
    $("#4").on("click", function(){
        setOptions(true,false,true,false);        
    });    
});

这里是html（我为你的每个选项添加了id以使这更容易）

<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" multiple>
    <option id="o1" value="fromDB">From Database</option>
    <option id="o2" value="fromFile">From File</option>
    <option id="o3" value="email">E-mail</option>
    <option id="o4" value="webServices">Web Services</option>
</select>