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

【问题标题】：Html Dropdown list On Change function not workingHtml下拉列表更改功能不起作用
【发布时间】：2018-07-03 20:30:45
【问题描述】：

我有这个下拉列表

 @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，但“更改时”功能不起作用。我的格式化方式有什么问题。

【问题讨论】：

你有$("itemPosition")，而它应该是$("#itemPosition")
谢谢。它仍然不适用于更改。
一个问题似乎是“所选”属性在选择另一个选项时未更新。不知何故，下拉列表中的正确值被传递给控制器，而不是下拉列表的文本。

标签： javascript jquery html asp.net-mvc jquery-mobile

【解决方案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 属性不会更新，但通过使用上述过滤器，您将获得（并且可以回发）所选选项（s ) 文本符合预期。

【讨论】：

我认为您的示例可能会导致正确答案，但我们能够使用传递给控制器的值找到解决方法。
@DanielMitchell：感谢您的反馈，如果您正在与 JQM 打交道，请不要错过这篇精彩的帖子：jQuery Mobile “Page” Events – What, Why, Where, When & How?