.text() и .val() в выберите тег

Question

У меня есть простой HTML разметки, как показано ниже: -

<select id="select1"> 
<option></option> 
<option>AAA</option> 
<option>BBB</option> 
<option>CCC</option> 
<option>DDD</option> 
<option>EEE</option> 
</select> 

<textarea style="height:150px;width:150px" id="t1"></textarea> 
<textarea style="height:150px;width:150px" id="t2"></textarea> 

Jquery код: -

$("#select1").change(function(){ 
    $("#t1").val($(this).text());   // 1st 
}); 

$("#select1").change(function(){ 
    $("#t2").val($(this).val());    // 2nd 
}); 

Мои вопросы: -

1.) Когда я использую 1-й код jquery с использованием .text(), текст всех вариантов в теге select отображается вместо этого, я ожидал, что в первом коде jquery должен отображаться только выбранный текст опции.

2.) Когда я использую код 2 jquery с использованием .val(), в этом случае работает .val(), хотя я не ожидаю, что он будет работать, потому что в моем выпадающем списке нет значений, но он работает и дает выбранный текст опции как ценность.

Выше написано два вопроса. Мне просто нужно объяснение, почему первый и второй коды jquery ведут себя неожиданно.

Fiddle Ссылка: - http://jsfiddle.net/mzfmxsd8/

Спасибо заранее .. !!

Answer 1

1) Вы должны найти option, который выбран, то найти его текст как $("#t1").val($(this).find(':selected').text());. Метод .text() вернет текстовое содержимое всех потомков текущего элемента. Таким образом, он извлекает текст всех параметров в элементе выбора.

2) Если нет, то значение содержания текст рассматривается как значение

option.value

текстовое содержимое этого атрибута представляет собой метку, объясняющую опцию. Если он не определен, его значением по умолчанию является текст содержимого элемента.

Демонстрация: Fiddle

Answer 2

В вашем коде вы пытаетесь отобразить текст параметров, выбрав все параметры элемента select. Поскольку вы хотите отображать текст только выбранной опции, вам нужно выбрать только выбранную опцию и отобразить ее текст внутри textarea.

Вот код:

$("#select1").change(function(){ 
    $("#t1").val($(this).find("option:selected").text());   // 1st 
}); 

Answer 3

this относится к элементу выбора. Когда вы вызываете на него .text(), он извлекает все его потомки (элементы параметров) и извлекает из него текст, что и есть то, что вы видите.

Если значения параметра не имеют атрибута значения, текст внутри него становится его значением. И, таким образом, значение элемента select является выбранным значением параметра.

Answer 4

вам просто нужно, чтобы получить выбранный функция преобразования текста

$("#select1").change(function(){ 
    $("#t1").val($(this).find('option:selected').text()); 
}); 

$("#select1").change(function(){ 
    $("#t2").val($(this).val()); 
}); 

DEMO

Answer 5

Чтобы получить выбранное значение:

this[this.selectedIndex].value

использования, что в лямбда. Чтение источника jQuery найдет для вас ваш ответ. В частности, вы должны изучить метод val, если хотите знать внутренности.

Пример: http://jsfiddle.net/LnL3trzj/

Answer 6

Пожалуйста, свяжитесь с ниже код

$("#select1").change(function(){ 
    $("#t1").val($("#select1 option:selected").text());   
});