Html 下拉列表更改功能不起作用

Question

我有这个下拉列表

 @Html.DropDownList("orderPosted", orderList, new { data_native_menu = "false", data_options_prefix = "Insert at Position: ", data_mini = "true" })

以及更新#itemPosition 以将其传递给控制器的脚本

   @Html.Hidden("itemPosition")

        <script>$("#itemPosition").val($("#orderPosted option:selected").text());

       $(function () {
                $("#orderPosted").on("change", function () {
                    $("#itemPosition").val($("option:selected", this).text());
                });

            })
        </script>

它会在页面加载时将文本分配给#itemPosition，但'On Change' 功能不起作用。我格式化的方式有什么问题。

Answer 1

这是一个工作示例，您可以通过将其与您的代码进行比较来找出您做错了什么：

function getSelected(el) {
  var value = el.val();
  var text = el.find("option").filter(":selected").text();
  $("#page-one pre").text("Selected: "+value+" - "+text);  
}

$(document).on("pagecreate", "#page-one", function() {
  getSelected($("#select-custom-1"));
  $("#select-custom-1").change(function() {
    getSelected($(this));
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="content" role="main">
      <select name="select-custom-1" id="select-custom-1" data-native-menu="false">
        <option value="1">The 1st Option</option>
        <option selected value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
        <option value="4">The 4th Option</option>
      </select>
      <pre></pre>
    </div>
  </div>
</body>

</html>

顺便说一句，是的，你是对的，selected 属性不会被更新，但是通过使用上面的过滤器，你会得到（并且可以post back) 所选择的选项文本符合预期。

Html 下拉列表更改功能不起作用

Html Dropdown list On Change function not working

html

javascript

asp.net-mvc

jquery

jquery-mobile