0

次のドロップダウン リストのシステムを実装したいと考えています。 ここに画像の説明を入力

ドロップダウン リストが<select>ステートメントを使用して実装されていることは承知しています。ただし、図にリストされている要件を処理するために Javascript コマンドを使用する必要があるかどうかはわかりません。これをどのように処理することをお勧めしますか?

前もって感謝します！

4

3 に答える 3

1

最初のオプションの選択イベントに基づいて、ユーザーが 2 番目と 3 番目のオプションのみを選択できるようにする場合は、おそらく JavaScript が必要になると思います。JavaScript が無効になっているユーザーに対応する必要がある場合は、ASP.Net / PHP / Django / Node.js などのサーバー側コードがビルドされるサーバーに投稿する [更新] ボタンのようなものを用意する必要があります。 2 番目と 3 番目のオプションを削除し、それらをユーザーに返します。

于 2012-04-25T04:59:09.157 に答える
1

2 番目と 3 番目のドロップダウンをdivs 内に配置し、最初は非表示のままにすることができます。最初の値が選択されたら、2 番目の値を表示します。これは、javascript を使用して簡単に行うことができます。例：

function onLoad() {
document.getElementById("dayDropDownDiv").style.visibility="hidden";
}

bodyasの div 内に選択を作成します。

<div id="dayDropDownDiv">
    <label for="select-Day" class="select">Day:</label>
    <select name="select-day" id="dayDropDown" onchange="dayChange(this)"></select>
</div>

また、javascript でプログラムによってドロップダウンを作成することもできます。次のように を に追加<option>する必要があります。<select>innerHTML

function addValues() {
    var dayOptionsList = "";

for(loopIndex=1;loopIndex<=31;loopIndex++){
        dayOptionsList = dayOptionsList+"<option>"+loopIndex+"</option>";//<-this will create an options list for days
    var daySelector  = document.getElementById("dayDropDown");
    daySelector.innerHTML = dayOptionsList;//done
}

最後に、最初<select>の の特定のオプションが選択されたときにそれらを表示します。

function firstValueSelected( resultsObj){
     var val = obj.options[obj.selectedIndex].text;//<- text of selected option
     if(val=="f")
         document.getElementById("dayDropDownDiv").style.visibility="visible";
}
于 2012-04-25T05:00:48.787 に答える
1

3 つすべてのドロップダウンがページに表示されますが、ドロップダウン 2 と 3 は非表示になります。最初のドロップダウンを変更すると、最初のドロップダウンの値を確認し、2 番目と 3 番目のドロップダウンを表示する必要があります。デモはこちらから入手できます

HTML では、3 つのドロップダウンを定義します。最初は表示され、2 番目と 3 番目は非表示になります。最初のドロップダウンから 3 を選択すると、非表示のドロップダウンが表示されます

<select id="sel1" >    
    <option > 1 </option>
    <option > 2 </option>
    <option > 3 </option>
</select>

<select id="sel2" style="display:none" >
    <option > 1 </option>
    <option > 2 </option>
    <option > 3 </option>
</select>

<select id="sel3" style="display:none" >
    <option > 1 </option>
    <option > 2 </option>
    <option > 3 </option>
</select>

​In javascript we have show the hidden dropdowns when 3 is selected from first drop down

$('#sel1').change(function ()
{   
    if($(this).val() == "3")
    {

        $('#sel2').show();
        $('#sel3').show();
    }
}
);
​
于 2012-04-25T05:11:06.070 に答える