1

我有一个 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时，选择框应该只显示第一个和第二个选项（来自数据库和来自文件），如果我选择Business Unit，我只想显示下两个选项，如果我选择第三个，我需要显示所有选项，如果我点击最后一个链接，它应该只显示第一个和第三个选项。如果只有两个或三个链接，我可以使用很多选择框，但我有超过 20 个链接。因此，很难为所有这些太常见的选项编写代码。

那么有什么方法可以实现这一目标吗？有人可以给出想法吗？

谢谢

4

2 回答 2

2

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

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

于 2013-05-13T06:17:37.557 回答
1

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

这是工作小提琴：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>
于 2013-05-13T06:01:02.210 回答