Question

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

该脚本按预期用于输入字段，但对于下拉列表，它不会检索当前选定的值，而是检索下拉列表中的第一个值。

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

在上述情况下，无论用户选择什么，摘要都会返回为＆＃39; A＆＃39;

我可以做些什么来完成这项工作？

更新

在实践中，这应该有效，但JQuery无法复制（＆＃39; select＆＃39;）的动态状态，如此错误所述。

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

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

您可以通过将selectedIndex分别复制到克隆的选择来解决此限制。＆＃34;

Answer 1

如果您只想获得所选的水果价值，那么您有很多代码：

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

<强>更新
如果你想要“通用”的东西:(未经测试）

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

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

1 个答案: