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>

我想要的是，当我点击组织数据时，选择框应仅显示第一个和第二个选项（来自数据库＆amp;来自文件），如果我选择业务单元，我只想显示下两个选项，如果我选择第三个选项，我需要显示所有选项，如果我点击最后一个链接，它应该只显示第一个和第三个选项。如果只有两个或三个链接我可以使用很多选择框，但我有超过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>

您可以按数据属性为链接添加“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>

根据链接显示选择框选项

2 个答案: