Question

ajax中未添加的下拉值回调此我的html代码

<div class="wrap">
    <div id="SeatInfo" class="floatleft"></div>
    <div id="ClusterInfo" class="floatright">
        <label id="Floor">Floor</label>
        <select id="FloorInfo">
            @foreach (SelectListItem item in ViewBag.data)
            {
                <option value=@item.Value>@item.Text</option>
            }
        </select>
        <label id="Seat">Seat</label>
        <select id="SeatInfo">

        </select>

    </div>
    <div style="clear: both;">
    </div>
</div>

这是脚本

<script type="text/javascript">
    $(document).ready(function() {

        $("#FloorInfo").change(function () {
            var value = $(this).val();
            $.ajax({
                url: "/Home/SeatInfo",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ FloorID: parseInt(value) }),
                success: function(data) {
                    $('#SeatInfo').empty(); // clear the current elements in select box
                    var dataDetails = data.split(':');
                    for (var i=0;i<dataDetails.length; i++) {
                        debugger;  var info = dataDetails[i].split(',');
                        $('#SeatInfo').append($('<option></option>').attr('value', info[0]).text(info[1]));
                    }

            }});
        });
    });

</script>

回调结果数据值：“Testing，2017：sf，2018：dfsad，2019：”

完成选择后未添加第二个下拉值？我能够在调试中获得正确的数据

Answer 1

您同时拥有ID为SeatInfo的Div和Select。由于id用于单个元素，因此只有页面中的第一个元素（在您的情况下是div）获取id，因此选项不会添加到您的选择中。将您的div重命名为其他内容。

Answer 2

尝试使用（Json）

 $("#FloorInfo").change(function () {
            var id = $(this).val();
            $.getJSON("/Home/SeatInfo", { id: id }, function (myData) {
                var select = $("#SeatInfo");
                select.empty();
                select.append($('<option/>', {
                    value: "0",
                    text: "--Select One--", selected: true
                }))
                $.each(myData, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            });
        });

Answer 3

您可以记录数据吗？还尝试使用data = $.parseJSON(data)来确保从json中解析数据。另外，我会这样做

var option = "";
option += "<option value=" + data to fill with + "></option>";
$("#SeatInfo").html(option);

这比附加......更好。

ajax回调中未添加下拉值

3 个答案: