0

我有一个从我的数据库中填充的下拉列表。这个 ddl 将根据它将包含多少选项进行自我复制。例如，如果它包含 5 个选项，那么我将有 5 个具有相同选项的 ddl

<select id="select_1"><option>1</option><option>2</option></select>          
<select id="select_2"><option>1</option><option>2</option></select>
...and so on.

这将用于链接查询。除了第一个选择选项之外的所有选项都将显示：无。我也有两个链接，一个说，另一个说或。我想要的是单击任一链接并删除为第二个 ddl 设置 display:none 的类，其标签对应于被单击的链接。例如，如果我单击 And 链接，我将在 ddl 旁边显示 And。我将如何使用 jquery 完成此操作，因为我很难弄清楚这一点。

<td id="study_select">
    <select id="study_select_1" name="studies_1">
    <option value="Study 1">Study 1</option>
    <option value="Study 2">Study 2</option>
    <option value="Study 3">Study 3</option>
    <option value="Study 4">Study 4</option>
    <option value="Study 5">Study 5</option>
    <option value="Study 6">Study 6</option>
</select>

<span id="and">
    <label id="andlab_2" class="invis_sel" for="study_select_2">And</label>
    <select id="study_select_2" class="invis_sel" name="studies_2">
        And<option value="And Study 1">Study 1</option>
        And<option value="And Study 2">Study 2</option>
        And<option value="And Study 3">Study 3</option>
        And<option value="And Study 4">Study 4</option>
        And<option value="And Study 5">Study 5</option>
        And<option value="And Study 6">Study 6</option>
    </select>
</span>
<span id="or">
    <label id="orlab" class="invis_sel" for="study_select2">Or</label>
    <select id="study_select_2" class="invis_sel" name="studies_2">
        <option value="Or Study 1">Study 1</option>
        <option value="Or Study 2">Study 2</option>
        <option value="Or Study 3">Study 3</option>
        <option value="Or Study 4">Study 4</option>
        <option value="Or Study 5">Study 5</option>
        <option value="Or Study 6">Study 6</option>
    </select>
</span>

<span id="and">
    <label id="andlab_3" class="invis_sel" for="study_select_3">And</label>
    <select id="study_select_3" class="invis_sel" name="studies_3">
        And<option value="And Study 1">Study 1</option>
        And<option value="And Study 2">Study 2</option>
        And<option value="And Study 3">Study 3</option>
        And<option value="And Study 4">Study 4</option>
        And<option value="And Study 5">Study 5</option>
        And<option value="And Study 6">Study 6</option>
    </select>
</span>

<span id="or">
    <label id="orlab" class="invis_sel" for="study_select3">Or</label>
    <select id="study_select_3" class="invis_sel" name="studies_3">
        <option value="Or Study 1">Study 1</option>
        <option value="Or Study 2">Study 2</option>
        <option value="Or Study 3">Study 3</option>
        <option value="Or Study 4">Study 4</option>
        <option value="Or Study 5">Study 5</option>
        <option value="Or Study 6">Study 6</option>
    </select>
</span>

<span id="and">
    <label id="andlab_4" class="invis_sel" for="study_select_4">And</label>
    <select id="study_select_4" class="invis_sel" name="studies_4">
        And<option value="And Study 1">Study 1</option>
        And<option value="And Study 2">Study 2</option>
        And<option value="And Study 3">Study 3</option>
        And<option value="And Study 4">Study 4</option>
        And<option value="And Study 5">Study 5</option>
        And<option value="And Study 6">Study 6</option>
    </select>
</span>

<span id="or">
    <label id="orlab" class="invis_sel" for="study_select4">Or</label>
    <select id="study_select_4" class="invis_sel" name="studies_4">
        <option value="Or Study 1">Study 1</option>
        <option value="Or Study 2">Study 2</option>
        <option value="Or Study 3">Study 3</option>
        <option value="Or Study 4">Study 4</option>
        <option value="Or Study 5">Study 5</option>
        <option value="Or Study 6">Study 6</option>
    </select>
</span>

<span id="and">
    <label id="andlab_5" class="invis_sel" for="study_select_5">And</label>
        <select id="study_select_5" class="invis_sel" name="studies_5">
        And<option value="And Study 1">Study 1</option>
        And<option value="And Study 2">Study 2</option>
        And<option value="And Study 3">Study 3</option>
        And<option value="And Study 4">Study 4</option>
        And<option value="And Study 5">Study 5</option>
        And<option value="And Study 6">Study 6</option>
    </select>
</span>

<span id="or">
    <label id="orlab" class="invis_sel" for="study_select5">Or</label>
        <select id="study_select_5" class="invis_sel" name="studies_5">
        <option value="Or Study 1">Study 1</option>
        <option value="Or Study 2">Study 2</option>
        <option value="Or Study 3">Study 3</option>
        <option value="Or Study 4">Study 4</option>
        <option value="Or Study 5">Study 5</option>
        <option value="Or Study 6">Study 6</option>
    </select>
</span>
<a id="chain_and">And</a> | <a id="chain_or">Or</a>  
</td>

抱歉，它有点长而且丑陋，如果有帮助的话，这是我目前拥有的 jquery

$("#chain_and").click(function(){
    $("#study_select select").each(function (i) {
        //var i = i+i;
        if ($(this).attr('id') != 'study_select_1') {
            if ($(this).children('#and')) {
                var study='#study_select_'+i;
                if (!$(this).children(study).css('display') == 'none') {
                    return;                       
                }
                else{
                    $('#andlab_'+i).removeClass('invis_sel');
                    $(study).removeClass('invis_sel');
                    i++;
                }
            }    
        } 
        return;
   });    
});
4

0 回答 0