JQuery - select val()只返回下拉列表的第一个值

JQuery - select val() only returns first value of dropdown

本文关键字：下拉列表 返回 第一个 select val JQuery      更新时间：2023-09-26

我有一个简单的表单摘要脚本，它返回表单中输入的所有值，并在对话框窗口中以简洁的格式显示这些值。

对于输入字段，脚本按预期工作，但对于下拉框，它不检索当前选择的值，而是检索下拉框中的第一个值。

我的HTML

<p><label> <b>*</b> Fruit </label>
  <select name="fruit">
    <option value="A">Apple</option>
    <option value="B">Orange</option>
    <option value="C">Pear</option>
  </select>
</p>

JQuery如下(节选):

var summarizeForm = function (formContent) {
  var summary = formContent.clone();
  summary.find('select').each(function() {
    $(this).replaceWith($(this).val()); 
  });
  return summary;
}
$('#dialogSummary').children('.dialog_contents')
.replaceWith(summarizeForm(formContents));

在上述情况下，无论用户选择什么，摘要返回为'A'。

我该怎么做才能使它工作?

在实践中，这应该工作，但JQuery不能复制('select')的动态状态，在这个bug中报告。

https://github.com/jquery/api.jquery.com/issues/90

由于性能原因，这个错误无法解决，所以我必须用另一种方式来解决。

您可以通过单独复制selectedIndex到克隆的select来解决此限制。"

如果您只想获得选定的水果值，则需要编写大量代码:

HTML: 

<p><label> <b>*</b> Fruit </label>
  <select name="fruit" id="fruit">
    <option value="A">Apple</option>
    <option value="B">Orange</option>
    <option value="C">Pear</option>
  </select>
</p>
<div id="dialogsummary"></div>
JavaScript: 

$("#fruit").change(function() {
    $("#dialogsummary").text("You selected: " + $(this).val());
});

jsFiddle

线索基本上是:$(".fruit").val()获取所选值。
如果您想使用文本(因为您正在构建摘要):$(".fruit").find(":selected").text();


如果你想要一些"通用"的东西:(not testing)

var str = "";
summary.find("select").each(function() {
    str += "Value for " + $(this).prop('name') + " is " + $(this).val();
});
相关文章：