html select与option标签

1、select 元素

select 元素可创建单选或多选菜单。<select> 元素中的 <option> 标签用于定义列表中的可用选项

常用属性如下:

autofocus:规定在页面加载后文本区域自动获得焦点。

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

form:规定文本区域所属的一个或多个表单。

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

name:规定下拉列表的名称。

required:规定文本区域是必填的。

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

2、option 元素

option 元素定义下拉列表中的一个选项(一个条目)。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

注释:<option> 标签可以在不带有任何属性的情况下使用,但是您通常需要使用 value 属性,此属性会指示出被送往服务器的内容。请与 select 元素配合使用此标签,否则这个标签是没有意义的。如果列表选项很多,可以使用 <optgroup> 标签对相关选项进行组合。

常用属性如下:

disabled:规定此选项应在首次加载时被禁用。

label:定义当使用 <optgroup> 时所使用的标注。

selected:规定选项(在首次显示在列表中时)表现为选中状态。

value:定义送往服务器的选项值。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
时间: 2024-12-23 22:27:03

html select与option标签的相关文章

使用原生JavaScript实现对select增加option标签并附加value属性

好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成, 本着互联网分享精神,我将本篇文章分享给大家. html代码(就是一个select) <select name="" id="reg-select"></select> json数据 var json = [ { "cc": "86", "code": "C

让 select 的 option 标签支持事件监听(如复制操作)

这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为它是系统OS级别处理的 想自定义option的样式,很多人会建议用 <ul> <li> 标签来辅助同步操作与值 想对option进行事件监听,有一个tip:当给select显示设置了size 属性且值 大于1 时,才能监听 近来产品也提了个鼠标操作复制option值的需求,就利用这个s

用HTML的select+option标签实现下拉框

10.4.2 HTML option 标签 option 标签 -- select菜单中的一个选项 option标签是成对出现的,以<option>开始,以</option>结束 引用网址:http://www.dreamdu.com/xhtml/tag_option/ 属性. common -- 公共属性 disabled -- 输入域无法获得焦点.无法选择,以灰色显示,在表单中不起任何作用 label -- 选择项的短标签 value -- 选项的初始值,未设置时为option

HTML &lt;select&gt; 标签&lt;option&gt; 标签

HTML <select> 标签 定义和用法 select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中的可用选项. 提示和注释: 提示:select 元素是一种表单控件,可用于在表单中接受用户输入. 属性 New: HTML5 中的新属性. HTML <option> 标签 定义和用法 option 元素定义下拉列表中的一个选项(一个条目). 浏览器将 <option> 标签中的内容作为

jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:

&lt;option&gt; 标签的 value 属性

<html> <body> <form action="/example/html/form_action.asp" method="get" target="_blank"> <select name="cars"> <option value="volvo">Volvo XC90</option> <option value=

得到select所有option里的值

得到select所有option里的值 . 2012-02-24 11:04:43|  分类: html|举报|字号 订阅 1://取得所有的option个数document.getElementById('---').options.length 2://取得每个option的ID值document.getElementById('---').options[i].value 3://取得每个option在页面显示的文本document.getElementById('---').option

HTML option 标签的 selected 属性

HTML option 标签的 selected 属性 http://www.w3school.com.cn/tags/att_option_selected.asp 1.一般做WEB的时候,Chrome的兼容性会比较好,但是这里有个特殊的情况,下面的方法,Chrome会有问题. Chrome版本:版本67.0.3371.0(正式版本) (32 位) 效果图 这里写图片描述 反例如下:(Chrome连续点击resetOption.setOption.resetOption.setOption就会

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解

今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数据. 接下来,自己用了select下拉标签和js函数进行填充后台传过来的数据. 经过自己的不断百度和参考别人的博客,试了很多次终于成功的调试出了想要的结果. 特来博客记录一下,也分享一下开心的心情. (一)首先引入样式和JS文件 样式文件和JS下载放到本地最好,因为放到本地自己可以修改一些东西. 在