ドロップダウンメニューOnChangeを変更する

Question

私は3つのドロップダウンメニューを持っています。 3つすべてが相互にリンクされています。つまり、第1ドロップダウンの値を選択すると、2番目のドロップダウンに値が表示されます。 2番目のドロップダウンの選択に応じて、3番目のドロップダウンが値を入力します。 1位と2位で行った。 2番目のドロップダウンの値に応じて、3番目のドロップダウンの値を設定できません。誰も私を助けることができますplaz。私はこれがJFIDDLE.comにあることを知っています。それを検索するために正確な名前を細かくすることはできません！

Answer 1

あなたがそれを望むなら、あなたはAJAXを使う必要があります。それは簡単になります。

<select name="ID" 
        id="ID" 
        onchange="DoYourTaskHere(this);"> 
         <option value="select" selected="selected">Select</option> 
         <c:forEach items="${A.List}" var="Variable"> 
          <option value="${ID}"> 
           <c:out value="${ID}" /> 
          </option> 
         </c:forEach> 
       </select> 

そして、次のようにコードを書くスクリプトインチ

function loadValue(ID) { 
    if (ID.value != "select") { 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, 
            // Safari 
      ValueXmlHttpReq = new XMLHttpRequest(); 
     } else {// code for IE6, IE5 
      ValueXmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     ValueXmlHttpReq.onreadystatechange = processLoadValues; 
     ValueXmlHttpReq.open("POST", "getValue.htm?ID=" 
       + ID.value, true); 
     ValueXmlHttpReq.send(); 
    } else { 
     var objSelect = document.getElementById("ValueId"); 
     var currentValueListLength = objSelect.options.length; 
     while (currentValueListLength > 0) { 
      objSelect.remove(1); 
      currentValueListLength--; 
     } 

     var objSelect = document.getElementById("2ndDropDownWhereYouWantToPopulate"); 
     var currentSecondValueListLength = objSelect.options.length; 
     while (currentSecondValueListLength > 0) { 
      objSelect.remove(1); 
      currentSecondValueListLength--; 
     } 
    } 
} 

Answer 2

あなたは簡単にセットアップ単一ページ上のコンボボックスの任意の数のインスタンスをすることができます関連のコンボボックス

を試すことができます。それらは、特定のクライアント側またはサーバー側のイベントに基づいて互いに対話することができます。

この例では、コンボボックスがクライアントサイドのメソッドを使用して相互にやり取りし、必要に応じてアイテムを要求する方法を示します。クライアント側でオンデマンドでアイテムを要求するには、requestItems（）メソッドが使用されます。

この例の適切な操作に必要なデータは、ClientStateで保持されるため、依存コンボボックスのViewStateは無効です。

は、ここでは、あなたが始めるために何かをhttp://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

Answer 3

オールライトを参照してください。

<form name='cars'> 
<select name='brand'></select> 
<select name='model'></select> 
</form> 
​ 

と（私はjQueryのを使用しています）のjavascript：

var application_model = [ 
    { 
    name: "General motors", 
    models: [ 
     "model1", "model2", "model3" 
     ]}, 
{ 
    name: "Mercedes", 
    models: [ 
     "model4", "model5", "model6" 
     ]}, 
{ 
    name: "Fiat", 
    models: [ 
     "model7", "model8", "model9" 
     ]} 
]; 

var selectedBrandIndex = 0 
var selectedModelIndex = 0 

function render() { 
    // render the first combo 
    $('select[name=brand]').empty(); 
    $.each(application_model, function(index, object) { 
     var selected = ""; 
     if (index == selectedBrandIndex) { 
      selected = "selected"; 
     } 
     console.log(this); 
     $('select[name=brand]').append("<option value='" + index + "' " + selected + ">" + object.name + "</option>"); 
    }) 

    // render the second combo 
    $('select[name=model]').empty(); 
    $.each(application_model[selectedBrandIndex].models, function(index, object) { 
     var selected = ""; 
     if (index == selectedModelIndex) { 
      selected = "selected"; 
     } 
     console.log(this); 
     $('select[name=model]').append("<option value='" + index + "' " + selected + ">" + object + "</option>"); 
    }); 
} 

function main() { 
    $("select[name=brand]").bind("change", function(event) { 
     console.log(event.currentTarget.value); 
     selectedBrandIndex = event.currentTarget.value; 
     render(); 
    }); 
    render(); 
} 

main();​ 

チェックここフィドル：

http://jsfiddle.net/camus/MAgza/2/

歓迎