从不同的输入类型抽象获取值答案

【问题标题】：abstract get value from different input types从不同的输入类型抽象获取值
【发布时间】：2012-03-27 05:05:56
【问题描述】：

我有类似的html

<input class="rowinput" type="text" id="text_input_1" size="1" value="3">
<input class="rowinput" type="text" id="text_input_2" size="1" value="0">
<select class="rowinput" id="select_input_3">
  <option value=""></option>
  <option value="0">aaaa</option>
  <option value="1" checked>bbbb</option>
  <option value="2">cccc</option>
  <option value="3">dddd</option>
</select>

现在我需要使用 jquery 来选择所有输入并获取它们的值，并创建一个表示所有值的字符串。我可以用这个：

$('.rowinput').val();

这将与文本输入完美配合，但对于选择输入则不行。因为我需要它获取与值相对应的文本，而不是值本身。例如，在上面的代码中，我需要得到“bbbb”而不是“1”。

然后，我要做的是创建一个新函数，例如 textVal()，它从文本输入中获取值并从选择输入中获取文本：

$('.rowinput').textVal();

会返回： 3 0 bbbb

我尝试使用：

input.attr('type');

它适用于文本输入。但对于 select 它返回 undefined

我不想硬编码并单独处理每个输入，因为我需要保持我的代码可扩展。这样做的明智方法是什么？

【问题讨论】：

你只是想要选定的值还是整个东西？
不，我不想要该值，我需要与所选值对应的文本。
好的，看看我的回答，我想这会有所帮助

标签： jquery select input

【解决方案1】：

如果要获取select的选定值。这是代码

<select class="rowinput" id="select_input_3">
  <option value=""></option>
  <option value="0">aaaa</option>
  <option value="1" selected="selected">bbbb</option>
  <option value="2">cccc</option>
  <option value="3">dddd</option>
</select>

Jquery，见demo here

$(".rowinput option[selected='selected']").text();

【讨论】：

【解决方案2】：

从类“.rowinput”中提取所有值。您可以尝试以下方法：

var concatenatedString = "";

$('.rowinput').each(function(){
var $this = $(this);

if($this.is('input')){
  concatenatedString += $this.val();
} 

if($this.is('select')) {
  concatenatedString += $this.children("option").is("selected").text();
}
});
alert(concatenatedString);

【讨论】：

如果答案足够好，请选择正确答案以提高您的评分。否则人们将停止回答你的问题。谢谢
谢谢你告诉我。我认为我需要重复 15 次才能做到这一点。

【解决方案3】：

如果您不喜欢上述内容，这里是另一个答案：

<select>
<option></option>
<option>aaaa</option>
<option>bbbb</option>
<option>cccc</option>
<option>dddd</option>
</select>

<div id='name'></div>

$(document).ready(function(){
$("select").change(function(){
var text = $(":selected").text();
$('#name').html(text);
});
});

【讨论】：