jquery - JQuery 没有看到“值”属性

Question

我有以下功能：

$(function () {
    $(".techdropdown").change(function () {
        var recordToUpdate = $(this).attr("id");
        var selectedTech = $(".techdropdown").val();
        window.alert(selectedTech);
        $.post("/CalloutAdmin/UpdateTech?tech=" + selectedTech + "&id=" + recordToUpdate, function () { document.location = "/CalloutAdmin/Index/"; });
    });
});

下拉列表如下：

@foreach (var item in Model)
                {
    @Html.DropDownList("TechnicianId", null, String.Empty, new { id = item.CalloutId, @class = "techdropdown" })
}

现在奇怪的是，JQuery 检测到 value 属性并使用 foreach 循环创建的 FIRST 下拉列表显示它（selectedTech），但其他下拉列表之后似乎没有发送 value 属性。

我在运行时检查过，选择选项肯定具有正确的值属性，但 JQuery 只是看不到它们。有任何想法吗？

更新

这是包含我的下拉列表的表格的 HTML：

<table class="table table-hover" style="background-color: white; width: 100%;">
                <tr style="background-color: #e6e6e6;">
                    <th>
                        Client Name
                    </th>
                    <th style="text-align: center">
                        Technician Name
                    </th>
                    <th>
                        Date/Time Logged
                    </th>
                    <th>
                        Job Status
                    </th>
                    <th>
                        Technician Status
                    </th>
                    <th></th>
                </tr>

                    <tr>
                        <td>
                            Michael Barnett
                        </td>
                        <td style="text-align: center">
                            Craig

                            <select class="techdropdown" id="7" name="TechnicianId"><option value="">Choose technician...</option>
<option value="1">Mike</option>
<option value="2">Craig</option>
</select>
                        </td>
                        <td>
                            2013/08/07 01:27:50 AM
                        </td>
                        <td>

                        </td>
                        <td>
                            ASSIGNED
                        </td>
                        <td>
                            <a href="/CalloutAdmin/Edit/7">Edit</a> |
            <a href="/CalloutAdmin/Details/7">Details</a> |
            <a href="/CalloutAdmin/Delete/7">Delete</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Michael Barnett
                        </td>
                        <td style="text-align: center">


                            <select class="techdropdown" id="8" name="TechnicianId"><option value="">Choose technician...</option>
<option value="1">Mike</option>
<option value="2">Craig</option>
</select>
                        </td>
                        <td>
                            2013/08/07 01:28:19 AM
                        </td>
                        <td>

                        </td>
                        <td>
                            UNASSIGNED
                        </td>
                        <td>
                            <a href="/CalloutAdmin/Edit/8">Edit</a> |
            <a href="/CalloutAdmin/Details/8">Details</a> |
            <a href="/CalloutAdmin/Delete/8">Delete</a>
                        </td>
                    </tr>

            </table>

score 1 · Accepted Answer

这是绑定下拉列表的另一种方法。假设您有以下模型：

public class TestViewModel
{
    // this will hold the value that we select
    public int SelectedCalloutId { get; set; }

    // these are the actual items
    public IEnumerable<SelectListItem> Technicians { get; set; }

    // add other properties needed for your view
}

这是示例控制器操作：

    public ActionResult Index()
    {
        // or you know fetch them from your data source
        var technicians = new List<Technician>
        {
            new Technician {TechnicianId = "SOME_ID_1", CalloutId = 123},
            new Technician {TechnicianId = "SOME_ID_2", CalloutId = 321},
            new Technician {TechnicianId = "SOME_ID_3", CalloutId = 234}
        };

        IEnumerable<SelectListItem> options = technicians.Select(x => new SelectListItem {Text = x.TechnicianId, Value = x.CalloutId.ToString()});

        return View(new TestViewModel {Technicians = options});
    }

最后在你看来：

@model YourApp.Models.TestViewModel    
@Html.DropDownListFor(x => x.SelectedCalloutId, Model.Technicians, new { @class = "techdropdown"})

这将或多或少地生成以下 html：

<select class="techdropdown" id="SelectedCalloutId" name="SelectedCalloutId">
    <option value="123">SOME_ID_1</option>
    <option value="321">SOME_ID_2</option>
    <option value="234">SOME_ID_3</option>
</select>

然后当然是在您的客户端：

$("#SelectedCalloutId").change(function () {
    // this now has a value
    var selectedId = $(this).val();
});

我希望这有帮助。

编辑

这是演示最后一部分的小提琴：http: //jsfiddle.net/4K2TD/

score 0 · Accepted Answer

尝试添加“选项：选择”如下：

$(function () {
    $(".techdropdown").change(function () {
        var recordToUpdate = $(this).attr("id");
        var selectedTech = $(".techdropdown option:selected").val();
        window.alert(selectedTech);
        $.post("/CalloutAdmin/UpdateTech?tech=" + selectedTech + "&id=" + recordToUpdate, function () { document.location = "/CalloutAdmin/Index/"; });
    });
});

score -1 · Accepted Answer

看起来你的 javascript 有点古怪。

var selectedTech = $(".techdropdown").val();

这将采用“techdropdown”类的第一个元素并返回其值。

如果您想要触发更改事件的下拉列表的值，那么您将需要：

var selectedTech = $(this).val();

希望有帮助。

score -1 · Accepted Answer

尝试这个：

$(function () {
    $(".techdropdown").change(function () {
        var recordToUpdate = $(this).attr("id");
        var selectedTech = $(".techdropdown").selected.val();
        window.alert(selectedTech);
        $.post("/CalloutAdmin/UpdateTech?tech=" + selectedTech + "&id=" + recordToUpdate, function () { document.location = "/CalloutAdmin/Index/"; });
    });
});

jquery - JQuery 没有看到“值”属性

4 回答 4

Related

Reference