根据另一个DropDown上选择的值填充DropDown / Select [英] Populate a DropDown/Select based on the value chosen on another DropDown
问题描述
我使用ASP.NET MVC与C＃加一些JavaScript（JQuery，JSON ...）。
我要做的是填充一个根据其他选择的值下拉。
看起来很简单（而且我知道是这样），但是这个特定情况不在我身上。
我已经失去了很多个小时，而且我仍然抱着我的头。如果有人可以帮助我会非常感谢。
我的代码如下：
我有一个具有阶段和顺序的类任务的对象。在第二个下拉列表中，用户可以使用的订单将取决于该任务在分片下拉列表中分配的阶段。订单只是一个Int32（从订单中的订单，而不是从业务订单）
第一个DropDown使用此IF来检查会话是否为空，然后过程显示默认消息或将所选值作为默认值。
<％
if（TempData [TaskObject ] = $）
{
var Phases = new SelectList（ViewData [phaseList] as List< Phase>，Phase_ID，Phase_Name，（（Task）TempData [TaskObject ）.Phase_ID.ToString（））;
％>
<％= Html.DropDownList（Phase_ID，Phases，new {@class =textbox}）％>
<％}％>
<％else
{％>
<％= Html.DropDownList（Phase_ID，（新的SelectList（（List< Phase>））ViewData [phaseList]，Phase_ID，Phase_Name）），
请选择...，
new {@class =textbox}）％>
<％}％>
第二个DropDown类似于第一个DropDown，但它的SelectList是列表列表。每个列表会阻止第一个DropDown中每个选项的可能选择。不要太多，所以不要担心。
<％if（TempData [TaskObject] ！= null）
{
var orderList =（ViewData [orderList] as List< List< int>）[0];
var orders = new SelectList（orderList，（（Task）TempData [TaskObject]）。Phase_ID.ToString（））;
％>
<％= Html.DropDownList（Order_ID，orders，new {@class =textbox}）％>
<％}％>
<％else
{％>
<％= Html.DropDownList（Order_ID，（新的SelectList（（List< int>）ViewData [phaseList]，Phase_ID，Phase_Name）），
请选择...，
new {@class =textbox}）％>
<％}％>
现在的问题是：如何使第二个DropDown根据所选值更改其值第一个DropDown？我在JavaScript很差（开始学习）。我们在项目中使用JQuery，JSON。
提前感谢您的关注。
您基本上希望将javascript事件附加到第一个删除列表中，并且jQuery查询Web服务（或其他）以获取该ID的详细信息。然后在javascript中，使用可用的选项重新渲染第二个下拉列表。一个很好的例子是 here 。例子中的Javascript提取如下：
$（function（）{
$ .getJSON（/ Home / Countries / List，function（data）{
var items =---------------------;
$ .each（data ，function（i，country）{
items + =+ country.Text +;
}）;
$（＃Countries）。html（items）;
$（＃Countries）。change（function（）{
$ .getJSON（/ Home / States / List /+ $国家>选项：selected）。attr（value），function（data）{
var items =--------------------- ;
$ .each（data，function（i，state）{
items + =+ state.Text +;
}）;
$（ #states）。html（items）;
}）;
}）;
}）;
I'm a beginner developer but I stumbled across a case I can't solve. I'm using ASP.NET MVC with C# plus some javascript (JQuery, JSON...).
What I have to do is to populate a dropdown based on the value chosen in other. It seems simple (and I know it is) but this particular case is eluding me. I've lost many hours and I'm still bonking my head. If anyone can help I'd be very grateful.
My code is as follows:
I have an object of the class "Task" that have both a Phase and an Order. The Orders available to the user in the second dropdown will depend on the Phase this Task was assigned to in the firts dropdown. Order is merely an Int32 (order from ordering in a schedule, not from business order)
The First DropDown uses this IF to check if a session is null, then procedes to show a default message or bring a selected value as default.
<%
if (TempData["TaskObject"] != null)
{
var Phases = new SelectList(ViewData["phaseList"] as List<Phase>, "Phase_ID", "Phase_Name", ((Task)TempData["TaskObject"]).Phase_ID.ToString());
%>
<%=Html.DropDownList("Phase_ID", Phases, new { @class = "textbox"})%>
<%}%>
<%else
{%>
<%=Html.DropDownList("Phase_ID", (new SelectList((List<Phase>)ViewData["phaseList"], "Phase_ID", "Phase_Name")),
"Please Choose...",
new { @class = "textbox"})%>
<%} %>
The second DropDown is much like the first, but its SelectList is a list of lists. Each list contais the possible choices for each choice in the first DropDown. There won't be many, so don't worry about it.
<%if (TempData["TaskObject"] != null)
{
var orderList = (ViewData["orderList"] as List<List<int>>)[0];
var orders = new SelectList(orderList, ((Task)TempData["TaskObject"]).Phase_ID.ToString());
%>
<%=Html.DropDownList("Order_ID", orders, new { @class = "textbox"})%>
<%}%>
<%else
{%>
<%=Html.DropDownList("Order_ID", (new SelectList((List<int>)ViewData["phaseList"], "Phase_ID", "Phase_Name")),
"Please Choose...",
new { @class = "textbox"})%>
<%} %>
The question now is: how do I make the second DropDown change its values based on the selected value in the first DropDown ? I'm very poor at JavaScript (started studying though). We're using JQuery, JSON at the project.
Thanks in advance for your atention.
You basically want to attach a javascript event onto the first drop list and have jquery query a web service (or other) to get the details for that ID. Then in javascript you re-render the second drop list with the available options. A pretty good example is here. Javascript extract from the example is below:
$(function() {
$.getJSON("/Home/Countries/List", function(data) {
var items = "---------------------";
$.each(data, function(i, country) {
items += "" + country.Text + "";
});
$("#Countries").html(items);
});
$("#Countries").change(function() {
$.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {
var items = "---------------------";
$.each(data, function(i, state) {
items += "" + state.Text + "";
});
$("#States").html(items);
});
});
});
这篇关于根据另一个DropDown上选择的值填充DropDown / Select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
