列表式单选在切换选中项时会触发selected事件

最新推荐文章于 2024-06-12 07:31:03 发布

dongsdh

最新推荐文章于 2024-06-12 07:31:03 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：第三方-mui框架

本文链接：https://blog.youkuaiyun.com/dongsdh/article/details/79753929

第三方-mui框架专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用列表式单选时如何通过监听'selected'事件来获取当前选中项的方法。通过简单的HTML和JavaScript代码示例，演示了如何在事件回调函数中获取到选中项的DOM节点，并打印其innerHTML属性。

列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：

<body>
<ul class="mui-table-view mui-table-view-radio">
	<li class="mui-table-view-cell">
		<a class="mui-navigate-right">Item 1</a>
	</li>
	<li class="mui-table-view-cell mui-selected">
		<a class="mui-navigate-right">Item 2</a>
	</li>
	<li class="mui-table-view-cell">
		<a class="mui-navigate-right">Item 3</a>
	</li>
</ul>
		
		

		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			var list = document.querySelector('.mui-table-view.mui-table-view-radio');
list.addEventListener('selected',function(e){
	console.log("当前选中的为："+e.detail.el.innerText);
});
		</script>
	</body>