2015-08-25 4 views
0

В моем JSP у меня есть форма с несколькими выпадающими элементами. Это форма, использующая объявление struts-tags.Struts-JQuery Отключить опцию drop down на основе выбора другого drop down

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

Вот простой пример для демонстрации. Вот как я записал свои капли вниз.

<s:select id="vehicleType" name="vehicleType" list="#{'0': 'Truck','1':'Sedan'}" 

<s:select id="vehicleList" name="vehicleList" list="#{'0':'Ford F150','1':'Dodge Ram','2':'Honda Accord','3':'Nissan Altima'}" 

Если я выбираю «грузовик» из «vehicleType» падение вниз, я хочу, чтобы отключить и «Honda Accord» и «Nissan Altima» от «vehicleList» падение вниз. Если я выберу «Седан» из раскрывающегося списка «VehicleType», я хочу отключить «Ford F150» и «Nissan Altima» из «VehicleList».

ответ

0

Попробуйте следующее:

function resetVehicleList(vehicleType) 
{ 
    $('#vehicleList option').show(); 
    if($(vehicleType).val() == '0') 
    { 
     $('#vehicleList option[value="2"]').hide(); 
     $('#vehicleList option[value="3"]').hide(); 
    } 
    else if($(vehicleType).val() == '1') 
    { 
     $('#vehicleList option[value="0"]').hide(); 
     $('#vehicleList option[value="1"]').hide(); 
    } 
    $('#vehicleList').val($('#vehicleList option:visible').first().attr('value')); 
} 

$('#vehicleType').change(function(){ 
    resetVehicleList(this); 
}); 

$(document).ready(function(){ 
    resetVehicleList($('#vehicleType')); 
}); 
0

Попробуйте следующий код для отключения опции:

$("#vehicleType").on('change', function() { 
    var vlist = $("#vehicleList"); 
    vlist.find('option').prop('disabled', false); 

    if (this.value === "0") { 
     vlist.find('option[value="2"]').prop('disabled', true); 
     vlist.find('option[value="3"]').prop('disabled', true); 
    } 
    else if (this.value === "1") { 
     vlist.find('option[value="0"]').prop('disabled', true); 
     vlist.find('option[value="1"]').prop('disabled', true); 
    } 

}); 

Демо: http://jsfiddle.net/mfd13w6u/