mvc视图双下拉框联动

html部分的代码

 <tr class="trs">
                <td class="item1"><div class="item">顶部模块</div></td>
                <td class="item2">
                    <div class="item">
                        <select style="width:90%;" id="top">
                            @foreach (var item in ViewBag.device)
                            {
                            <option value="@item.Id" id="@item.Id">@item.Name</option>
                            }
                        </select>
                    </div>
                </td>
                <td class="item3">
                    <div class="item">
                        <select style="width:30%;" id="topitem"></select>
                    </div>
                </td>
            </tr>

脚本部分代码

$(document).ready(function () {
        $("#top").change(function () {
            var top = $("#top").val();
            var topitem = $("#topitem");
            $.ajax({
                url: "/Site/GetProperty/" + top,
                type: "post",
                dataType: "json",
                contentType: "application/json",
                success: function (result) {
                    var myHTML = "";
                    topitem.html("");//赋值之前先清空
                    for (var i = 0; i < result.list.length; i++) {
                        myHTML += "<option value=" + result.list[i].id + ">" + result.list[i].name + "</option>";
                    }
                    topitem.append(myHTML);
                },
                error: function (result) {

                }
            });
        })