基于另一个DropDownList的选择动态填充DropdownList

我需要能够基于先前的DropDownList的选择来填充DropDownList。基于另一个DropDownList的选择动态填充DropdownList

我注意到这里有很多类似的主题，不幸的是，我需要使用AJAX调用来完成此操作，并且需要在MVC5中完成而不进行回发（如果可能）。

这是可能的吗？
我从哪里开始？是/有任何我可以离开的例子吗？

来源

2016-08-18 John Schultz

简答是不，它不可能。如果你不想使用javascript/ajax，那么你将需要提交一个表单来回传第一个下拉列表的值，然后重定向或返回第二个下拉列表填入数据的视图。 –

好的，。希望我可以放弃使用AJAX来实现这一点。 –

尽管如果你可以使用javascript，你可以发送第二个下拉列表的所有数据并将其存储在一个javascript数组中，然后处理第一个下拉列表的更改事件以填充第二个下拉列表。 –

其实这是可以做到这一点没有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演示了这种方法

来源

2016-08-18 06:21:10

DUDE !! ！你得到道具，工作得很好。谢谢。 –

基于另一个DropDownList的选择动态填充DropdownList

回答

相关问题