Javascript JQuery-select val（）只返回下拉列表的第一个值

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

脚本的工作方式与输入字段相同，但对于下拉列表，它不会检索当前选定的值，而是检索下拉列表中的第一个值

这是我的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>

在上述情况下，不管用户选择什么，摘要返回为“A”

我能做些什么来让它工作

更新

在实践中，这应该是可行的，但是JQuery不能复制（'select'）的动态状态，正如在这个bug中报告的那样

由于性能原因，无法解决该错误，因此我必须以另一种方式完成此任务

您可以通过将selectedIndex单独复制到克隆的selectedIndex来克服此限制。”

---

如果您只想获得选定的水果值，则有大量代码：

HTML:

线索基本上是：

$（“.fruit”）.val（）

以获取所选值。
如果您想要文本（因为您正在构建摘要）：

$（“.fruit”）.find（“：selected”）.text（）；

更新
如果你想要一些“通用”的东西：（未经测试）

---

replaceWith

更改元素并将其替换为一个值…我甚至不知道它为什么与输入一起工作。我很难理解您想要什么…多余的代码是为了避免对所有元素进行硬编码，比如说有一个具有多个下拉列表的表单。因此我的理解是我必须调用.change（）在SummaryForm函数之外？每当用户在下拉列表中选择一个选项时，

.change（）

就会被调用。我之所以使用它，是因为在您提供的代码段中从来没有调用过

SummaryForm

。基本上，您只需要使用

$（“.fruit”）.val（）

在摘要中获取所选值。我想我已经解决了。经过一点调试，我发现实际上是

.clone（）

将值重置为“a”。这很奇怪，但不用说，我会记住这个解决方案，以找到另一种方法，谢谢您的帮助。

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));

<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>

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

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