select onChange事件

最新推荐文章于 2023-04-12 11:11:45 发布

码农致富

最新推荐文章于 2023-04-12 11:11:45 发布

阅读量2.8w

点赞数 7

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u011781521/article/details/72780622

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML示例，通过JavaScript实现下拉框的onChange事件。当用户从下拉列表中选择一个选项时，该选项及其携带的数据会显示在页面上。此示例适用于初学者理解事件处理及DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select onChange事件，实现效果为,选择下拉框中的一个把他显示出来.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>select onChange事件</title>
</head>
<body>
            <select id="EffectiveDateSel" onChange="DispayPrice();">

                <option>切换 <b class="caret"></b></option>
                <option value="121.473701,31.230416,200000">上海市</option>
                <option value="116.407526,39.90403,100000">北京市</option>
                <option value="103.826308,36.059421,620100000000">兰州市</option>
                <option value="113.264434,23.129162,510000">广州市</option>

            </select>
			
			<span id="cityse"></span>

<script>
function DispayPrice()
    {
        var nSel = document.getElementById("EffectiveDateSel");
        var index = nSel.selectedIndex; // 选中索引
        var text = nSel.options[index].text; // 选中文本
		var value= nSel.options[index].value;
        document.getElementById("cityse").innerHTML=text+"----"+value;

    }
</script>
</body>
</html>