Question

我有一个从我的数据库中填充的下拉列表。这个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.

这将用于链接查询。除第一个选择选项之外的所有选项都将显示：none。我也有两个链接，一个说，另一个说或。我想要的是单击任一链接并删除设置display：none的类，用于第二个ddl，其中lable对应于被单击的链接。例如，如果我单击And链接，我将在ddl旁边显示标签。我如何用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;
   });    
});

单击按钮时显示选择选项

0 个答案: