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

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 的脚本，值从控制器返回。 （控制器代码附在下面）。

这是填充 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();
        }
    });

});