0

私は以下のコードを持っています：

    function showHideOptions() {
        $("#template1, #template2, #template3, #template4").css("display","none");
        $(this).css("display","block");
}

そして、4つの選択ドロップダウンがあります。特定の時間に、テンプレートセレクターのオプションで1つだけを選択したいと思います。

    <select id="masterdropdown">
        <option>T1</option>
        <option>T2</option>
        <option>T3</option>
        <option>T4</option>
    </select> 


<select id="template1" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2"  onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select>

CSS：

#template1, #template2, #template3, #template4{display:none;}

基本的に、トップドロップダウン（マスタードロップダウン）があります。これは常に表示されます。これはテンプレートセレクターでもあります。オプションを選択すると、マスタードロップダウンで選択したオプションに対応する特定のテンプレートドロップダウンを表示します。これはjqueryでどのように達成できますか。この場合は機能せ$(this)ず、関数から呼び出されます。

4

3 に答える 3

1

動作するデモ を参照してくださいhttp://jsfiddle.net/X5mWL/

JS

$(function(){
        $("#masterdropdown").change(function() {
            $("#template1, #template2, #template3, #template4").hide();
            $($("#masterdropdown").val()).show();
    });
});

HTML

 <select id="masterdropdown">
        <option value="#template1">T1</option>
        <option value="#template2">T2</option>
        <option value="#template3">T3</option>
        <option value="#template4">T4</option>
    </select> 


<select id="template1">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select>
于 2011-10-19T05:26:53.830 に答える
1 
        <script>
        $(document).ready(function() {
          $('#masterdropdown').showHideOptions().change();
        });

        $.fn.showHideOptions = function() {
         this.change(function() {
           $(".templateDropdowns").hide();
           $('#' + $(this).val()).show();
        });
        return this;
        };

        </script>

        <select id="masterdropdown">
        <option value="template1">template1</option>
        <option value="template2">template2</option>
        <option value="template3">template3</option>
        </select>  
        <select id="template1" class="templateDropdowns">
         <option>ta</option>
         <option>tat</option>
        </select>
        <select id="template2" class="templateDropdowns">
        <option>ete</option>
        <option>eTee</option>
        </select>
        <select id="template3" class="templateDropdowns">
        <option>Te</option>
        <option>Tet</option>
        </select>
于 2011-10-19T05:19:46.790 に答える
0

マスタードロップダウンに変更イベントハンドラーをアタッチします。

その中で、選択値を確認し、対応するドロップダウンを表示/非表示にします。

このようなもの（javascriptでは少し錆びています）

$（ "masterdropdown"）。change（function（）{

$("#template1, #template2, #template3, #template4").hide();
var selText = $(this).search("option:selected").text();
if(selText == 'T1') $("#template1").show();
if(selText == 'T2') $("#template2").show();
if(selText == 'T3') $("#template3").show();
if(selText == 'T4') $("#template4").show();

}）;

于 2011-10-19T05:22:59.160 に答える