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" })
}

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

我已经在运行时检查过，选择选项肯定有正确的值属性，但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>

Answer 1

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

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/

Answer 2

尝试添加“选项：已选择”，如下所示：

$(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/"; });
    });
});

Answer 3

看起来你的javascript有点笨拙。

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

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

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

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

希望有所帮助。

Answer 4

试试这个：

$(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没有看到“价值”属性

4 个答案: