您的位置：首页 > Web前端 > JQuery

【JQuery】下拉列表框的change事件

2016-04-02 16:35 567 查看
当一个元素的值发生变化时，将会触发change事件。

例如在选择下拉列表框中的选项时，就会触change事件。

其实很好理解，但是我在写程序的过程中，却发现了另外的问题。

<body>
<h3>下拉列表的change事件</h3>
<select id="seltest">
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="荔枝">荔枝</option>
<option value="香焦">香焦</option>
</select>
<div></div>

<script type="text/javascript">
$(function () {
$("select").bind("change",function () {
if (this.value== "苹果")
$(this).css("background-color", "red");
else
$(this).css("background-color", "green");
$('div').html("你选择的是:"+$(this).val());
})
});
</script>
</body>


注意在程序中,

if (this.value== "苹果")


和

$('div').html("你选择的是:"+$(this).val());


this是html元素对象，所以能调用元素属性，如this.value，this.id等等。

$(this)是JQuery对象，所以能调用JQuery方法，如：$(this).val()等方法。

否则会出错。

还有

$('div')只能使用html()或者text()等JQuery方法，不能使用：‘$('div').innerText=’，这样是错误的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航