javascript - 如何使用javascript获取下拉列表的选定值

Question

我有一个表，其中有几个@Html.dropdowlistfor。

我试图使用javascript读取所选值，但所有读取的都是生成的html。 我怎样才能读到它？

for (var i = 0; i < oTable.length; i++) {
  **userModel.Id    = oTable[i][0];**

  regionModel.Users.push(userModel);
  processModel.Regions.push(regionModel);

  userModel   = { "Id": "", "Name": ""};
  regionModel = { "Id": "", "Name": "", "Users": []};
}

表格

<table class="tbl" id="tbl">
        <thead>
            <tr>
                <th>
                    Region
                </th>
                <th>
                    Owner
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                foreach (var item in Model.Regions)
                {
                <tr>
                    <td>
                        @Html.DisplayTextFor(i => item.Name)
                    </td>
                    <td>
                        @Html.DropDownListFor(i => item.Users, new SelectList(item.Users, "Id", "Name"))
                    </td>
                </tr>
            }
            }
        </tbody>

代码

function ProcessSave() {
    // Step 1: Read View Data and Create JSON Object

    var userModel = { "User": "", "Name": ""};

    var regionModel = {"Region" : "","Name": "", "Users": []};

    var processModel = { "User": "", "Description": "", "Code": "", "Regions": []};

    var oTable = $('.tbl').dataTable().fnGetData();

        for (var i = 0; i < oTable.length; i++) {

            regionModel.Name  = oTable[i][0];

            userModel.User    = oTable[i][1];
            userModel.Name    = oTable[i][1];

            regionModel.Users.push(userModel);
            processModel.Regions.push(regionModel);

            userModel   = { "Id": "", "Name": ""};
            regionModel = { "Name": "", "Users": []};
       }
    // Step 1: Ends Here

    // Set 2: Ajax Post
    // Here i have used ajax post for saving/updating information
    $.ajax({
        url: '/Process/Create',
        data: JSON.stringify(processModel),
        type: 'POST',
        contentType: 'application/json;',
        dataType: 'json',
        success: function (result) {

            if (result.Success == "1") {
                window.location.href = "/Process/Index";
            }
            else {
                alert(result.ex);
            }
        }
    });
}

型号

 namespace TestingTool.ViewModels
    {
        public partial class ProcessModel
        {
            public string Name { get; set; }
            public string Description { get; set; }
            public string Code { get; set; }

            public virtual ICollection<RegionModel> Regions { get; set; }
        }
    }

    namespace TestingTool.ViewModels
    {
        public class RegionModel
        {
            public int Region { get; set; }
            public string Name { get; set; }
            public virtual ICollection<UserModel> Users { get; set; }

        }
    }

    namespace TestingTool.ViewModels
    {
        public class UserModel
        {
            public int User{ get; set; }
            public string Name { get; set; }
        }
    }

HTML 输出

<table class="tbl" id="tbl">
            <thead>
                <tr>
                    <th>
                        Region
                    </th>
                    <th>
                        Owner
                    </th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>
                            Belgium
                        </td>
                        <td>
                            <select id="item_Users" name="item.Users"><option value="1">Steven Segers</option>
<option value="2">Rui Martins</option>
</select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            France
                        </td>
                        <td>
                            <select id="item_Users" name="item.Users"><option value="1">Steven Segers</option>
<option value="2">Rui Martins</option>
</select>
                        </td>
                    </tr>
            </tbody>
        </table>

Answer 1

你尝试过吗:

$("#item_Users option:selected").index();

如果您有许多具有相同 id 的选择，请尝试此操作(该选择器选择所有名称属性以 Users 结尾的“选择”:

 $("select[name$='Users']:eq(0) option:selected").index();  //get first select

 $("select[name$='Users']:eq(1) option:selected").index();  //get second select

但是在页面上使用多个相同 ID 的不良做法。页面上应该有相同的 id。但即使页面上有多个 id，最好为所有选择指定相同的类，在这种情况下，代码将很快:

 $("select.Users:eq(0) option:selected").index();  //get first select

 $("select.Users:eq(1) option:selected").index();  //get second select

更新:

$("select.Users").each(function (index, element) {
    var optionIndex = $(element).find("option:selected").index();
});