javascript - ASP.NET MVC - 使用 Jquery 追加 HTML 后，DropDownList 值未定义

Question

我有两个下拉列表，当我更改第一个的值时，使用以下代码刷新第二个的值：

 function FillBooks(val) {
            $("#ddl_dep").attr("class", "form-group");
            $("#Help1").css("visibility", "hidden");
            var CategoryId = val;
            //console.log(CategoryId);
            console.log(CategoryId)
            $("#DDL_TIPO").empty();
            $.ajax({
                url: '@Url.Action("UpdateTipo", "Tickets")',
                type: "POST",
                dataType: "JSON",
                data: { value: CategoryId },
                success: function (data) {
                    var markup = "<option value='0'>Selecione um Tipo</option>";
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value=" + data[x].value + ">" + data[x].Text + "</option>";
                    }
                    $("#DDL_TIPO").html(markup).show();

                }
            });

        }

PS - 数据来自与我展示的示例无关的控制器。

在此之后，当我尝试获取第二个下拉列表的值时，它是未定义的。

我在这个 jquery 代码之前进行了测试，它给了我下拉列表的值，当我让这个函数在它上面工作时它没有给出。

标签： javascriptjqueryasp.net-mvc

Answer 1

尝试这个：

<script>  
        function FillBooks(val)  
    {  

                $("#ddl_dep").attr("class", "form-group");
                $("#Help1").css("visibility", "hidden");
                var CategoryId = val;
                //console.log(CategoryId);
                console.log(CategoryId) 
            $.ajax  
            ({  
                url: '@Url.Action("UpdateTipo", "Tickets")',
                type: 'POST',  
                datatype: 'application/json',  
                contentType: 'application/json',  
                data: { value: CategoryId },  
                success: function(result)  
              {  
                    $("#DDL_TIPO").html("");  
                    $.each($.parseJSON(result), function(i, tipo)  
                    {  
                        $("#DDL_TIPO").append($('<option</option>').val(tipo.Value).html(tipo.Text))  
                    })  

                },  
                error: function()  
                {  
                    alert("Whooaaa! Something went wrong..")  
                },  
            });  
        }  
    </script>