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，但是＆＃39; On Change＆＃39;功能不起作用。我格式化的方式出了什么问题。

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>

BTW，是的，你是对的，selected 属性不会更新，但通过使用上面的过滤器，你将获得（并可以回发）所选的选项（s）正如预期的那样。

Html下拉列表On Change功能不起作用

1 个答案: