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。）当我使用.text()使用第一个jquery代码时，会显示select标记中所有选项的文本，而我期望只有选定的选项文本应显示在第一个jquery代码中。

2。）当我使用.val()使用第二个jquery代码时，在这种情况下.val()正在工作，即使我不希望它会起作用，因为我的下拉列表中没有值，但它正在工作并将选定的选项文本作为值。

上面写的是我的两个问题。我只想解释为什么第1和第2个jquery代码出现意外行为。

小提琴链接： - http://jsfiddle.net/mzfmxsd8/

先谢谢!! !!

Answer 1

1）您需要找到所选的option，然后找到其文本$("#t1").val($(this).find(':selected').text());。 .text()方法将返回当前元素的所有后代的文本内容。因此，它会获取select中所有选项的文本。

2）如果没有值，则将文本内容视为值

option.value

此属性的文本内容代表标签说明选项。如果未定义，则其默认值为文本元素的内容。

演示：Fiddle

Answer 2

this指的是select元素。当你在它上面调用.text()时，它会检索它的所有后代（选项元素）并从中提取文本，这就是你所看到的。

当选项值没有值属性时，其中的文本将成为其值。因此，select元素的值是选定的选项值。

Answer 3

在您的代码中，您尝试通过选择select元素的所有选项来显示选项文本。由于您只想显示所选选项的文本，您只需选择所选选项并在textarea中显示其文本。

以下是代码：

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

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

在lambda中使用它。阅读jQuery源代码将为您找到答案。特别是如果你想了解内部结构，你应该查看val方法。

示例：http://jsfiddle.net/LnL3trzj/

Answer 6

请查看以下代码

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

select标签中的.text（）和.val（）

6 个答案: