Question

我正在尝试填充下拉列表，但是根据另一个下拉列表的选择（两个值都必须从数据库中填充）。

我有一个运营商列表，我成功地从数据库中填充了它。现在，我想基于通过发送其ID选择的运营商来填充计划下拉列表。

HTML（两者都下拉）

<!--ENTER CARRIER-->
                <div class="form-group">
                    <label for="carrier">Carrier:</label>
                    <select id="drpCarrier" class="form-control" name="carrierName" required onchange="getPlan(this.value);">
                        <option value="" disabled selected>Please Select a Carrier</option>
                    </select>
                </div>

                <!--ENTER PLAN-->
                <div class="form-group">
                    <label for="plan">Plan:</label>
                    <select id="drpPlans" class="form-control" name="PlanName" required>
                        <option value="" disabled selected>Please Select a Plan</option>
                    </select>
                </div>

Carrier的脚本，值从控制器返回。（下面附有控制器代码）。

这是填充载体下拉的ajax。

$.ajax({
        method: "POST",
        dataType: "json",
        url: "@Url.Action("getCarrierList", "SimInventory")",
        success: function (response) {
            if (response.type == "Success") {
                for (var i = 0; i < response.data.length; i++) {
                    var item = response.data[i];
                    var planOption; planOption += "<option value=" + item.ID + ">" + item.Name + "</option>";
                }
                document.getElementById("drpCarrier").innerHTML = planOption;
            }
            else{
                if(response.type == "Error")
                    notifyMe(response.message, "Warning");
            }$('#loading_spinner').hide();
    },
    error: function(error){
        console.log(error);
        $('#loading_spinner').hide();
    }
});

这是用于填充计划的脚本，但它很可能无法正常工作。

function getPlan(value){
        $.ajax({
            method: "POST",
            dataType: "json",
            data: value,
            url: "@Url.Action("getPlanList", "SimInventory")",
            success: function (response) {
            if (response.type == "Success") {
                console.log(response.data);
            }
            else
                if (response.type == "Error") {
                    notifyMe(response.message, "Warning");
                }
            $('#loading_spinner').hide();
        },
        error: function (error) {
            console.log(error);
            $('#loading_spinner').hide();
        }
    });
    }

控制器

public JsonResult getCarrierList()
    {
        try
        {
            CarrierBLL carrier = new CarrierBLL();
            var carrierlist = carrier.GetAllCarriers();

            return Json(new { type = "Success", data = carrierlist }); 
        }
        catch (Exception ex)
        {
            string message = ex.Message;
            if(ex.InnerException != null)
            {
                message += ex.InnerException.Message;
            }
            _Common.Log(message, "SimInventory", "getCarrierList");
            return Json(new { type = "Error", message = ex.Message });
        }
    }

现在我的问题是，如何实现此功能。一旦用户选择任何承运人，则该计划应仅适用于所选承运人。提前谢谢。

Answer 1

您可以在更改时使用jquery而不是getPlan（）函数，

请在选择框中删除onchange事件。

<select id="drpCarrier" class="form-control" name="carrierName" required>
<option value="" disabled selected>Please Select a Carrier</option>
</select>


$('#drpCarrier').on('change', function() {
var value = $('#drpCarrier :selected').text();
  $.ajax({
            method: "POST",
            dataType: "json",
            data: value,
            url: "@Url.Action("getPlanList", "SimInventory")",
            success: function (response) {
            if (response.type == "Success") {
                console.log(response.data);
            }
            else
                if (response.type == "Error") {
                    notifyMe(response.message, "Warning");
                }
            $('#loading_spinner').hide();
        },
        error: function (error) {
            console.log(error);
            $('#loading_spinner').hide();
        }
    });

});

如何根据另一个下拉菜单的选择获取下拉菜单的值

1 个答案: