javascript - 根据响应动态获取下拉列表

Question

我有 3 个单选按钮，例如:

 <input type="radio" name="editList" value="Proveedor">Proveedor
 <input type="radio" name="editList" value="Usuario">Usuario
 <input type="radio" name="editList" value="Sucursal">Sucursal

我想根据所选的 radio 加载我的下拉列表

下拉菜单

 <select id="lstProveedor" class="form-control select2 select2-accessible" aria-hidden="true">
 </select>

JS:

<script type="text/javascript">
    $(function () {
        var items = "";
        $.getJSON("@Url.Action("GetProveedores", "Agenda")", function (data) {

            $.each(data, function (index, item) {
                items += "<option value='" + item.ID + "'>" + item.NombreComercial + "</option>";
            });
            $("#lstProveedor").html(items);
        });

    });
</script>

如您所见，我使用一个 @Url.Action 填充下拉列表，但我想根据所选的单选按钮更改它和 .each 数据。

例如: 如果选择了provedor单选按钮，则加载这部分js:

$.getJSON("@Url.Action("GetProveedores", "Agenda")", function (data) {

                $.each(data, function (index, item) {
                    items += "<option value='" + item.ID + "'>" + item.NombreComercial + "</option>";
                });
                $("#lstProveedor").html(items);

如果选择 Sucursal 则加载这部分 js

$.getJSON("@Url.Action("GetSucursal", "Agenda")", function (data) {

                $.each(data, function (index, item) {
                    items += "<option value='" + item.ID + "'>" + item.Sucursal+ "</option>";
                });
                $("#lstProveedor").html(items);

我怎样才能实现它？问候

更新:

作为拉蒙的回答，我这样做:

<script type="text/javascript">
    $(function getJsonProveedores() {
        var items = "";
        $.getJSON("@Url.Action("GetProveedores", "Agenda")", function (data) {

            $.each(data, function (index, item) {
                items += "<option value='" + item.ID + "'>" + item.NombreComercial + "</option>";
            });
            $("#lstProveedor").html(items);
        });

    });
    $(function getJsonUnidades() {
        var items = "";
        $.getJSON("@Url.Action("GetUnidades", "Agenda")", function (data) {

            $.each(data, function (index, item) {
                items += "<option value='" + item.ID + "'>" + item.Nombre + "</option>";
            });
            $("#lstProveedor").html(items);
        });


    });
    $(function getJsonUsuarios() {
        var items = "";
        $.getJSON("@Url.Action("GetUsuario", "Agenda")", function (data) {

            $.each(data, function (index, item) {
                items += "<option value='" + item.ID + "'>" + item.Nombre + "</option>";
            });
            $("#lstProveedor").html(items);
        });

        $('input[type=radio][name=editList]').change(function () {
            if (this.value == 'Proveedor') {
                getJsonProveedores();
            }
            else if (this.value == 'Sucursal') {
                getJsonUnidades();
            }
            else if (this.value == 'Usuario') {
                getJsonUsuarios();
            }
        });

    });
</script>

但是在 Chrome 控制台中我收到两个错误:

Uncaught ReferenceError: getJsonProveedores is not defined Uncaught ReferenceError: getJsonUnidades is not defined

Answer 1

我创建了一个 html 文件，它的工作方式如下:

function getJsonProveedores() {
    var items = "";
    console.log('teste proveedor');

};
function getJsonUnidades() {
    var items = "";
    console.log('unidades');
};
function getJsonUsuarios() {
    console.log('usuarios');
};
$(function() {
  $('input[type=radio][name=editList]').change(function() {
        if (this.value == 'Proveedor') {
            getJsonProveedores();
        } else if (this.value == 'Usuario') {
            getJsonUsuarios();
        } else if (this.value == 'Sucursal') {
            getJsonUnidades();
        }
    });
});