如何获取和设置HTML文档中select元素的选中项

如何获取和设置HTML文档中select元素的选中项,第1张

在HTML页面中,获取当前select元素中所选中的那个值和显示值。

<tr>

<th scope="row" width="15%" nowrap >*目标字段</th>

<td><select name="idMbzd" style="width:25%" onchang=”on_idmbzd_change()”>

<option value=”1”>eg1</option>

<option value=”2”>eg2</option>

<option value=”3”>eg2</option>

</select>

</td>

</tr>

<script>

function on_idmbzd_change(){

var sel_obj = document.getElementByIdx("idMbzd ");

var index = sel_obj.selectedIndex

alert(sel_obj.options[index].value)

alert(sel_obj.options[index].text)

}

</script>

设置select元素的选中项:

通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。

<select id = "sel" >

<option value = "1" >1</ option >

<option value = "2" selected = "selected" >2</ option >

<option value = "3" >3</ option >

</ select >

扩展资料

超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

HTML标签的大小写无关的,例如“主体”<body>跟<BODY>表示的意思是一样的,推荐使用小写。

参考资料来源:百度百科-HTML

<select>标签定义和用法

select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select>表单数据提交给服务器时包括 name 属性。

<select>标签可选的属性

属性 值 描述

disabled disabled 规定禁用该下拉列表。

multiple multiple 规定可选择多个选项。

namename规定下拉列表的名称。

sizenumber 规定下拉列表中可见选项的数目。

<select>标签全局属性

<select>标签支持 HTML 中的全局属性。

<select>标签事件属性

<select>标签支持 HTML 中的事件属性。

html里可以用<select>标签设置下拉框。下面详细介绍其用法。

这是测试链接,可以参考本教程自己实 *** 网页链接。

1、<select>标签

<select>标签在HTML里面是下拉框,用户点一下可以选择里面的选项

2、<option>标签

<option>标签是<select>标签的选项,它有2个东西需要设置,分别是值value和文本显示。

例如这个opion

  <option value="0">请选择分类</option>

它的value是0,文本是"请选择分类"。

如果你在页面保存了一些信息,一般提交给服务器的时候提交的是它的value。

3、尝试编写例子

例如下面的代码,在html里面展示的效果如图

<select>

<option value="0">请选择分类</option>

<option value="1">美食/营养</option>

<option value="10">游戏/数码</option>

<option value="37">手工/爱好</option>

<option value="50">生活/家居</option>

<option value="73">健康/养生</option>

<option value="86">运动/户外</option>

<option value="93">职场/理财</option>

<option value="101">情感/交际</option>

<option value="108">母婴/教育</option>

<option value="123">时尚/美容</option>

</select>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11544511.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存