2016-08-18 173 views
1

我需要能夠基於先前的DropDownList的選擇來填充DropDownList。基於另一個DropDownList的選擇動態填充DropdownList

我注意到這裏有很多類似的主題,不幸的是,我需要使用AJAX調用來完成此操作,並且需要在MVC5中完成而不進行回發(如果可能)。

  1. 這是可能的嗎?
  2. 我從哪裏開始?是/有任何我可以離開的例子嗎?
+0

簡答是不,它不可能。如果你不想使用javascript/ajax,那麼你將需要提交一個表單來回傳第一個下拉列表的值,然後重定向或返回第二個下拉列表填入數據的視圖。 –

+0

好的, 。希望我可以放棄使用AJAX來實現這一點。 –

+0

儘管如果你可以使用javascript,你可以發送第二個下拉列表的所有數據並將其存儲在一個javascript數組中,然後處理第一個下拉列表的更改事件以填充第二個下拉列表。 –

回答

3

其實這是可以做到這一點沒有AJAX,但仍然需要一些JavaScript:

第一和第二的下拉列表中應該有所有可用的prerenderd選項。對於第二個下拉菜單中的每個選項,指定該選項應顯示的第一個下拉菜單的值。例如:

<select id="firstDd"> 
    <option value="car">Cars</option> 
    <option value="plane">Planes</option> 
</select > 


<select id="secondDd"> 
    <option value="ferrari" data-display-on="car">Ferrari</option> 
    <option value="bugatti" data-display-on="car">Bugatti</option> 
    <option value="747" data-display-on="plane">Boeing 747</option> 
    <option value="757" data-display-on="plane">Boeing 757</option> 
</select > 

現在一些簡單的JavaScript您可以切換基於第一個值的第二個下拉選項知名度:

$('#firstDd').change(function(){ 
    var value = $(this).val(); 
    if(value) 
    { 
    var $secondDd = $('#secondDd'); 
    var $selectedOption = $('option:selected', $(this)); 
    $('option', $secondDd).hide(); 
    $('option[data-display-on="'+value+'"]',$secondDd).show();  
    } 
    $($secondDd).val(null); 
}) 

$('#firstDd').change(); 

這裏是working JSFiDDLE演示了這種方法

+0

DUDE !! !你得到道具,工作得很好。謝謝。 –

相關問題