我有一个简单的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/
先谢谢!! !!
答案 0 :(得分:3)
1)您需要找到所选的option
,然后找到其文本$("#t1").val($(this).find(':selected').text());
。 .text()方法将返回当前元素的所有后代的文本内容。因此,它会获取select中所有选项的文本。
2)如果没有值,则将文本内容视为值
此属性的文本内容代表标签说明 选项。如果未定义,则其默认值为文本 元素的内容。
演示:Fiddle
答案 1 :(得分:2)
this
指的是select元素。当你在它上面调用.text()
时,它会检索它的所有后代(选项元素)并从中提取文本,这就是你所看到的。
当选项值没有值属性时,其中的文本将成为其值。因此,select元素的值是选定的选项值。
答案 2 :(得分:1)
在您的代码中,您尝试通过选择select元素的所有选项来显示选项文本。由于您只想显示所选选项的文本,您只需选择所选选项并在textarea中显示其文本。
以下是代码:
$("#select1").change(function(){
$("#t1").val($(this).find("option:selected").text()); // 1st
});
答案 3 :(得分:0)
您只需要选择选项文本
$("#select1").change(function(){
$("#t1").val($(this).find('option:selected').text());
});
$("#select1").change(function(){
$("#t2").val($(this).val());
});
答案 4 :(得分:0)
获取所选值:
this[this.selectedIndex].value
在lambda中使用它。阅读jQuery源代码将为您找到答案。特别是如果你想了解内部结构,你应该查看val
方法。
答案 5 :(得分:0)
请查看以下代码
$("#select1").change(function(){
$("#t1").val($("#select1 option:selected").text());
});