`
chengyu2099
  • 浏览: 473084 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

SELECT-optgroup-label效果

阅读更多
[color=blue]
<select name='Grade' class='s8'>
<option value=''>— 请选择 —</option>
<optgroup label='学期教育'></optgroup>
<option value='18'>&nbsp;&nbsp;学期教育</option>

<optgroup label='小学'></optgroup>
<option value='5'>&nbsp;&nbsp;1年级</option>
<option value='6'>&nbsp;&nbsp;2年级</option>
<option value='7'>&nbsp;&nbsp;3年级</option>
<option value='8'>&nbsp;&nbsp;4年级</option>
<option value='9'>&nbsp;&nbsp;5年级</option>
<option value='10'>&nbsp;&nbsp;6年级</option>

<optgroup label='初中'></optgroup>
<option value='11'>&nbsp;&nbsp;7年级</option>
<option value='12'>&nbsp;&nbsp;8年级</option>
<option value='13'>&nbsp;&nbsp;9年级</option>

<optgroup label='高中'></optgroup>
<option value='14'>&nbsp;&nbsp;10年级</option>
<option value='15'>&nbsp;&nbsp;11年级</option>
<option value='16'>&nbsp;&nbsp;12年级</option>
</select>

[/color]
  • 大小: 11.9 KB
分享到:
评论

相关推荐

    bootstrap-select-master下拉框。

    &lt;optgroup label="Group 1"&gt; &lt;option&gt;Option 1.1 &lt;option&gt;Option 1.2 &lt;/optgroup&gt; &lt;optgroup label="Group 2"&gt; &lt;option&gt;Option 2.1 &lt;option&gt;Option 2.2 &lt;/optgroup&gt; &lt;/select&gt; ``` 4. **搜索功能**:...

    ySelect-master.zip

    主要的CSS类包括`.y-select-wrap`, `.y-select-input`, `.y-select-ul`, `.y-select-optgroup`, `.y-select-option`等。 7. **兼容性与性能** 由于依赖jQuery,`ySelect.js`适用于大部分现代浏览器,但可能在一些...

    html中select optgroup标签使用介绍

    HTML中的`&lt;select&gt;`元素用于创建下拉列表,而`&lt;optgroup&gt;`标签则是一个非常有用的辅助元素,它允许我们将`&lt;select&gt;`中的选项分组,为用户提供更清晰、更有组织的视图。在处理大量选项时,使用`&lt;optgroup&gt;`可以极大地...

    bootstrap select树形下拉框

    &lt;optgroup label="父节点1"&gt; 子节点1 &lt;!-- &lt;optgroup label="子节点2"&gt; 孙子节点1 &lt;/optgroup&gt; --&gt; &lt;/optgroup&gt; &lt;!-- 更多父节点... --&gt; &lt;/select&gt; ``` 2. **初始化Bootstrap Select**:在文档加载完成...

    bootstrap select 标签

    &lt;optgroup label="Group 1"&gt; &lt;option&gt;Option 1.1 &lt;option&gt;Option 1.2 &lt;/optgroup&gt; &lt;optgroup label="Group 2"&gt; &lt;option&gt;Option 2.1 ... &lt;/optgroup&gt; &lt;/select&gt; ``` 6. **事件和方法**:Bootstrap Select ...

    select复选框带全选

    &lt;label for="selectAll"&gt;全选&lt;/label&gt; ``` 接下来,我们可以使用jQuery或其他JavaScript库编写事件处理函数,监听全选框的改变,然后遍历所有的select选项,根据全选框的状态设置它们的选中状态: ```javascript $...

    select 分组下拉菜单自定义样式

    本话题将深入探讨如何自定义`select`分组下拉菜单的样式,以实现更美观且功能丰富的交互效果。 首先,我们需要了解`&lt;select&gt;`的基本结构。一个带有分组的`select`通常会包含`&lt;optgroup&gt;`元素来创建选项组,以及`...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    &lt;optgroup label="分组1"&gt; 选项1 &lt;/optgroup&gt; &lt;optgroup label="分组2"&gt; 选项2 &lt;/optgroup&gt; &lt;/select&gt; ``` 然后,在JavaScript中,我们需要初始化这个插件,让其对`&lt;select&gt;`元素进行增强: ```javascript $...

    使用select2实现下拉列表动态模糊查询

    &lt;optgroup label="Group 1"&gt; &lt;option value="1"&gt;Option 1 ... &lt;/optgroup&gt; &lt;optgroup label="Group 2"&gt; ... &lt;/optgroup&gt; &lt;/select&gt; ``` **7. 动态加载数据** 如果选项是从服务器动态获取的,可以使用Ajax...

    jquery如何自定义select下拉样式

    在网页开发中,jQuery是一个...通过以上步骤,我们可以利用jQuery和Select2插件轻松实现自定义的`&lt;select&gt;`下拉样式,提升网页的视觉效果和交互体验。在实际项目中,根据需求选择合适的插件和配置,以达到最佳效果。

    iOS中Safari浏览器select下拉列表文字太长被截断的处理方法.docx

    `&lt;optgroup&gt;`是一个在`&lt;select&gt;`元素内部使用的HTML标签,用于将多个相关的`&lt;option&gt;`选项分组,提供更好的可读性和视觉效果。在iOS Safari浏览器中,使用`&lt;optgroup&gt;`标签可以巧妙地避免文字被截断的问题。这是因为...

    select下拉菜单

    &lt;optgroup label="Group 2"&gt; &lt;option&gt;Option 2.1 &lt;option&gt;Option 2.2 &lt;/optgroup&gt; &lt;/select&gt; ``` 在实际项目中,可能还需要考虑兼容性问题,因为并非所有浏览器都支持所有CSS属性。因此,使用前缀(如`-webkit-...

    JavaScript 仿DropDownList控件 html下拉列框美化

    &lt;optgroup label="---------------------------"&gt; &lt;/optgroup&gt; &lt;option value="52"&gt;Acrylic Beads sfsf sdfsdfsdffffffffffff &lt;option value="28"&gt;Fimo Beads &lt;/select&gt; DropDownList.bind(...

    select 单列组件(自己拿去修改)

    在一些高级的前端框架如React、Vue、Angular中,可以使用自定义组件来替换原生的Select,以实现更复杂的样式和交互效果。例如Bootstrap的`&lt;select&gt;`插件、Ant Design的`Select`组件等。 六、JavaScript与API操作 ...

    前端项目-react-select.zip

    2. **Option 和 Optgroup**:Option 用于表示单个选择项,Optgroup 用于组织选项,创建分组。 3. **Creatable 属性**:React Select 提供Creatable扩展,允许用户创建新的选项,增加了组件的灵活性。 三、React ...

    HTML Select 下拉菜单功能扩展

    &lt;optgroup label="Group 1"&gt; &lt;option&gt;Option 1.1 &lt;option&gt;Option 1.2 &lt;/optgroup&gt; &lt;optgroup label="Group 2"&gt; &lt;option&gt;Option 2.1 &lt;/optgroup&gt; &lt;/select&gt; ``` 3. **自定义样式**:通过CSS,可以改变下拉...

    jquery下拉菜单select二级菜单导航

    通常,一级菜单会是一个`&lt;select&gt;`元素,而二级菜单则可以由多个`&lt;optgroup&gt;`或`&lt;option&gt;`组成,嵌套在一级菜单中。 ```html &lt;select id="dropdown"&gt; &lt;optgroup label="一级菜单1"&gt; 二级菜单1-1 二级菜单1-2 &lt;/...

    HTML 中 select 的学习

    为了提高可读性和组织性,可以在`&lt;select&gt;`元素中使用`&lt;optgroup&gt;`标签来分组相关的`&lt;option&gt;`元素。`&lt;optgroup&gt;`标签包含一个`label`属性,用于定义该组的标题。 ```html &lt;select name="vehicle"&gt; &lt;optgroup ...

    HTML中的select标签如何使用.docx

    结合`&lt;option&gt;`、`&lt;optgroup&gt;`等标签以及JavaScript,可以实现更复杂的交互效果和功能。在实际应用中,`&lt;select&gt;`标签常被用于创建表单,收集用户数据,并与其他表单元素一起工作,如按钮、文本输入框等,以构建功能...

Global site tag (gtag.js) - Google Analytics