html select 标签知多少

select标签做应用层程序开发的肯定都用到过。有的时候老是忘记里面的一些东西，写出来了，自己查就方便了。看个例子

Java代码  

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf8">  
  4. <title>select example</title>  
  5. </head>  
  6. <body>  
  7.  <select id="test" size="10" name="test"  multiple="multiple">  
  8.   <optgroup label="lanuage">  
  9.    <option value="HTML">html</option>  
  10.    <option value="CSS" selected>css</option>  
  11.    <option value="javascript">js</option>  
  12.    <option value="PHP">php</option>  
  13.    <option value="ASP">python</option>  
  14.    <option value="JSP">java</option>  
  15.   </optgroup>  
  16.   <optgroup label="database">  
  17.    <option value="Pgsql">pgsql</option>  
  18.    <option value="MySQL">mysql</option>  
  19.    <option value="mssql">mssql</option>  
  20.   </optgroup>  
  21.  </select>  
  22. </body>  
  23. </html>  

显示如下

解释一下：

1，<select id="test" size="10" name="test"  multiple="multiple">

id定义的了唯一标识；size定义了这个下拉框的高度；multiple表示可以多选，你可以ctrl+鼠标左击，shift+鼠标左击，来选取你的数据。

a，去掉size='10'效果如下 

b,去掉multiple="multiple",效果如下 

 c,把size=10和multiple="multiple"都去掉，效果如下 

2，<optgroup label="lanuage">这个是标签分组，是不可选的，去掉看看

看到效果了吧，select根据属性的不同，可分为单选和多选，并且多选

时间： 2024-08-01 13:52:45

html select 标签知多少的相关文章

清空select标签中option选项的3种不同方式

本文为大家详细介绍下使用3种不同方式来清空select标签中option选项,具体语法格式如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助   方法一 复制代码 代码如下: document.getElementById("selectid").options.length = 0; 方法二 复制代码 代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码 代码如下: document.getElementByI

html select标签的属性和方法

  html select标签的属性: 标签属性 属性 描述 ACCESSKEY accessKey 设置或获取对象的快捷键. ALIGN align 设置或获取对象针对其邻接文本如何排列. ATOMICSELECTION   指定元素及其内容是否可以一不可见单位统一选择.   canHaveChildren 获取表明对象是否可以包含子对象的值.   canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值. CLASS className 设置或获取对象的类.   clien

添加后台list给前台select标签赋值简单实现

本文为大家介绍下通过添加后台list怎么实现给前台select标签赋值,具体代码如下,感兴趣的朋友可以参考下哈   复制代码 代码如下: $.ajax({ url : "user!findUserList.action", type : "post", success: function(data){ var jsonObj=eval("("+data+")"); $.each(jsonObj, function (i, it

js获取select标签的值且兼容IE与firefox

 本篇文章主要介绍了js获取select标签的值且兼容IE与firefox.需要的朋友可以过来参考下,希望对大家有所帮助 jsp代码: 代码如下: <form id="search">  <select id="jobSelect" style="width: 200px;" name="jobSelect">   <s:if test='jobSelect == null || jobSelec

js获取select标签选中值的两种方式

 获取select标签选中的值有很多方法,下面通过两种方式使用js来进行获取,喜欢的朋友可以参考下 代码如下: var obj = document.getElementByIdx_x("testSelect"); //定位idvar index = obj.selectedIndex; // 选中索引var text = obj.options[index].text; // 选中文本var value = obj.options[index].value; // 选中值jQuery

Select标签下拉列表二级联动级联实例代码

 这篇文章主要介绍了Select标签下拉列表二级联动级联实例代码,需要的朋友可以参考下 首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. 代码如下: var options=new Array();     $(document).ready(function(){         //二级联动         $('#ddlPages').children('option').each(function(i){             options[i]=

在Firefox下js select标签点击无法弹出

在Firefox下js select标签点击无法弹出,在IE和CHROME下没有此现象 在项目中运用到了JQUERY UI,用到了其中的disableSelection()方法,这个方法是让页面上的指定元素无法通过鼠标拖拽进行选择. 由于某些需求,我在给div使用了此方法后,达到了上述效果,但是有不足的地方. 在Firefox下运用此方法后,div中的select方法点击之后将会无法弹出,在IE和CHROME下没有此现象.  

selenium处理select标签的下拉框

有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option&g

jquery 实现两Select 标签项互调示例代码_jquery

<html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" c