абстрактный получить значение из разных типов ввода

Question

У меня есть 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

Я не хочу жестко кодировать его и обрабатывать каждый вход отдельно, потому что мне нужно, чтобы мой код расширялся.какой умный способ сделать это?

Answer 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, см. демо здесь

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

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

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