Меню DropDown Изменение OnChange

Question

У меня есть раскрывающееся меню. и все 3 взаимосвязаны. т.е., если я выбираю значения 1-го раскрывающегося списка, в зависимости от того, что во втором выпадающем списке должны отображаться значения. в зависимости от выбора второго выпадающего меню, 3-й раскрывающийся список должен заполнять значения. сделали для 1-го и 2-го. но в зависимости от значений 2-го падения я не могу заполнить значения 3-го раскрывающегося списка. может ли кто-нибудь помочь мне. Я знаю, что это похоже на 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

вы можете попробовать, связанные COMBOBOX

Вы можете легко настроить любое количество экземпляров выпадающего списка на одной странице. Они могут взаимодействовать друг с другом на основе определенных событий на стороне клиента или сервера.

В этом примере показано, как combobox могут взаимодействовать друг с другом с использованием методов на стороне клиента и запрашивать элементы по требованию. Чтобы запросить элементы по запросу на стороне клиента, используется метод requestItems().

ViewState зависимых комбобокс отключен, поскольку данные, необходимые для их правильной работы в этом примере, поддерживаются в их ClientState.

см http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

Answer 3

AllRight, здесь что-то, чтобы вы начали:

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

и Javascript (я использую JQuery):

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/

ура