JQuery - 选择val（）只返回第一个下拉值 [英] JQuery - select val() only returns first value of dropdown

问题描述

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

按照预期的输入字段，但对于下拉菜单，它不会检索当前选定的值，而是下拉菜单中的第一个值。

这是我的HTML

 < p>< label> < b取代; *< / B个水果< / label> 
< select name =fruit> 
< option value =A> Apple< / option> 
< option value =B>橙色< /选项> 
< option value =C>梨< / option> 
< / select> 
< / p> 
  

JQuery如下（删节）：

  var summarizeForm = function（formContent）{
 var summary = formContent.clone（）; 
 
 summary.find（'select'）。each（function（）{
 $（this）.replaceWith（$（this）.val（））; 
}） ; 
返回汇总; 
 
 
 $（'＃dialogSummary'）。children（'。dialog_contents'）
 .replaceWith（summarizeForm（formContents））; 
  

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

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

更新

实际上，这应该可行，但JQuery无法复制（'select'）的动态状态，正如此错误中所报告的。

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

由于性能原因无法解决该错误，因此我必须以其他方式完成此项操作。

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

解决方案

如果您只想获取选定的水果价值，您就有很多代码：

 < p>< label>< b> *< / b> F ruit< / label> 
< select name =fruitid =fruit> 
< option value =A> Apple< / option> 
< option value =B>橙色< /选项> 
< option value =C>梨< / option> 
< / select> 
< / p> 
 
< div id =dialogsummary>< / div> 
  

JavaScript：

 < code$＃fruit）。change（function（）{
 $（＃dialogsummary）。text（You selected：+ $（this）.val（））; 
}）; 
  

jsFiddle

线索基本上是： $（。fruit）.val（）来获得选定的值。

如果你想改为文本（因为你正在创建一个摘要）： $（。fruit）。find（：selected ）.text（）;

更新

如果您想要'generic '而不是：（未测试）

  var str =; 
 summary.find（select）。each（function（）{
 str + =Value for+ $（this）.prop（'name'）+is+ $（this ）.val（）; 
}）; 
  

I have a simple form summary script that returns all values entered in a form, and displays the values in a concise format in a dialog window.

The script works as intended for input fields, but for dropdowns it doesn't retrieve the currently selected value, but rather the first value in the dropdown.

Here's my 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 is as follows (abridged):

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

In the above situation the summary return as 'A', regardless of what the user selects.

What can I do to make this work?

Update

In practice this should work, but JQuery cannot copy the dynamic state of a ('select'), as reported in this bug.

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

The bug cannot be addressed due to performance reasons so I'll have to accomplish this another way.

You can work around this limitation by separately copying the selectedIndex to your cloned select."

解决方案

You have alot of code if you just want to get the selected fruit value:

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

The clue is basically: $(".fruit").val() to get the selected value.
If you want instead the text (since you're building a summary): $(".fruit").find(":selected").text();

Update
If you want something 'generic' instead: (not tested)

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

这篇关于JQuery - 选择val（）只返回第一个下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！