jquery - ボタンをクリックしたときに選択オプションを表示する

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. 

これは、クエリをチェーンするために使用されます。最初の選択オプション以外はすべて、display:none になります。私はまた、一方が言い、もう一方がOrと言う2つのリンクを持っています。私が望むのは、いずれかのリンクをクリックして、クリックされたリンクに対応するラベルを使用して、2番目の 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;
   });    
});