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

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

вернется: BBBB

Я пытался использовать:

input.attr('type'); 

отлично работает для ввода текста. но для выбора он возвращает undefined

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

Answer 1

Чтобы извлечь все значения из класса ".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 2

Если вы хотите, чтобы получить выбранное значение 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(); 

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