<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉选框</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="padding: 50px;">
<!--单选下拉框-->
<select data-am-selected>
<option value="a">AAA</option>
<option value="b" selected>BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
<option value="o" disabled>禁用按钮</option>
</select>
<!--多选下拉框-->
<select multiple data-am-selected>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<!--多选下拉框 - 有默认选中项-->
<select multiple data-am-selected>
<option value="a">AAA</option>
<option value="b" selected>BBB</option>
<option value="c">CCC</option>
<option value="d" selected>DDD</option>
</select>
<!--分组多选下拉框-->
<select multiple data-am-selected>
<optgroup label="字母">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</optgroup>
<optgroup label="数字">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
</optgroup>
</select>
<!--按钮尺寸及颜色-->
<select data-am-selected="{btnWidth: '40%', btnSize: 'sm', btnStyle: 'secondary'}">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<!--限制列表高度-->
<select data-am-selected="{maxHeight: 100}">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<!--上拉选择-->
<select data-am-selected="{dropUp: 1}">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<!--简易搜索-->
<select data-am-selected="{searchBox: 1}">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<!--选项验证提示-->
<select multiple data-am-selected minchecked="2" maxchecked="3" id="demo-maxchecked">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<script>
$('#demo-maxchecked').on('checkedOverflow.selected.amui', function() {
alert('最多选择' + this.getAttribute('maxchecked') + '项');
});
</script>
<!--JS 操作 select-->
<select id="js-selected" data-am-selected>
<option value="a">Apple</option>
<option value="b" selected>Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
</select>
<hr/>
<button type="button" data-selected="add" class="am-btn am-btn-primary">添加选项</button>
<button type="button" data-selected="toggle" class="am-btn am-btn-secondary">交替 Orange 选中状态</button>
<button type="button" data-selected="disable" class="am-btn am-btn-danger">交替 Mango 禁用状态</button>
<hr/>
<div id="js-selected-info"></div>
<script>
$(function() {
var $selected = $('#js-selected');
var $o = $selected.find('option[value="o"]');
var $m = $selected.find('option[value="m"]');
var i = 0;
$('[data-selected]').on('click', function() {
var action = $(this).data('selected');
if (action === 'add') {
$selected.append('<option value="o' + i +'">动态插入的选项 ' + i + '</option>');
i++;
}
if (action === 'toggle') {
$o.attr('selected', !$o.get(0).selected);
}
if (action === 'disable') {
$m[0].disabled = !$m[0].disabled;
}
// 不支持 MutationObserver 的浏览器使用 JS 操作 select 以后需要手动触发 `changed.selected.amui` 事件
if (!$.AMUI.support.mutationobserver) {
$selected.trigger('changed.selected.amui');
}
});
$selected.on('change', function() {
$('#js-selected-info').html([
'选中项：<strong class="am-text-danger">',
[$(this).find('option').eq(this.selectedIndex).text()],
'</strong> 值：<strong class="am-text-warning">',
$(this).val(),
'</strong>'
].join(''));
});
});
</script>
<!--与 Validator 插件结合使用-->
<form action="" data-am-validator>
<select name="test" data-am-selected required>
<option value=""></option>
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
</select>
<p>
<button class="am-btn am-btn-primary">提交</button>
</p>
</form>
<!--<select> （单选）默认选择第一项的问题-->
<select data-am-selected placeholder="默认选择第一项" id="demo-default-selected">
<option selected value=""></option>
<option label="111" value="1">1111</option>
<option label="222" value="2">2222</option>
<option label="333" value="3">3333</option>
<option label="444" value="4">4444</option>
<option label="555" value="5">5555</option>
</select>
</body>
</html>
效果图：
相关推荐
在这个主题中，我们将深入探讨AmazeUI中的下拉组件，这是一个常见的交互元素，用于在有限的空间内展示更多的选项。 下拉组件通常用于导航菜单、表单选择器或者设置面板中，它通过折叠内容来节省屏幕空间，同时保持...
AmazeUI是一款基于移动优先的前端开发框架，专为中国互联网环境设计，旨在提供高效、易用、跨屏的网页制作解决方案。它集成了多种组件和模块，帮助开发者快速构建响应式和高性能的Web页面，尤其适合企业级项目。在...
- 组件丰富：AmazeUI包含了大量的预封装组件，如导航、表单、按钮、模态框、下拉菜单等，方便快速开发。 - 主题定制：AmazeUI支持自定义主题，可以通过修改CSS变量来改变整体风格。 2. **组件详解**： - **导航*...
AmazeUI是一个开源的前端框架，专为移动优先的Web开发设计。这个“基于AmazeUI的漂亮后台模板”提供了一套完整的、适用于后台管理界面的设计方案，它结合了AmazeUI的核心特性，使得开发者能够快速构建出既美观又实用...
6. **插件扩展**：AmazeUI弹出窗可以与其他组件（如表单、下拉菜单等）结合使用，提供更丰富的功能。 7. **源码分析**：通过阅读源码，开发者可以了解其内部工作原理，以便进行深度定制或优化。 在实际应用中，...
4. **模块化组件**: AmazeUI提供了一系列可复用的组件，如按钮、表单、网格、导航、下拉菜单等，这些组件遵循移动优先的原则，简化了开发流程，提高了代码复用性和可维护性。 5. **Bootstrap启发**: 虽然AmazeUI...
Amaze UI提供了丰富的组件，如按钮、表格、下拉菜单、日期选择器等，大大简化了开发工作。 6. **HTML后台管理模板**：作为HTML模板，它可以直接用于构建Web应用的后端界面，无需复杂的前端框架配置，降低了开发难度...
CSS 部分用于美化下拉选框，使其看起来更像标准的 UI 元素。`.dropdown` 类设置了一些基本样式，如位置、背景色和阴影；`.dropdown-item` 类则用于定义每个选项的样式。 这个简单的示例展示了如何使用 jQuery 和 ...
AmazeUI提供了丰富的组件，如按钮、表单、下拉菜单等，可以帮助我们快速构建后台管理界面。在实际开发中，还可以结合数据库操作（如SQLAlchemy）实现数据的增删改查功能，以及使用Flask的Session和LoginManager模块...
3. **组件丰富**：AmazeUI提供了丰富的组件库，包括导航、表单、按钮、网格系统、下拉菜单、模态框、轮播图等，这些组件都经过精心设计，易于集成到项目中，大大提升了开发效率。 4. **兼容性**：AmazeUI对浏览器的...
2. **组件丰富**：AmazeUI提供了多种常见UI组件，如导航、按钮、表单、下拉菜单、模态框、滑块、提示信息等，这些组件既美观又实用，大大简化了前端开发工作。 3. **主题定制**：AmazeUI支持自定义主题，开发者可以...
3. `widget.html`和`widget.basic.html`："Widget"指的是可复用的组件，这些文件可能是AmazeUI提供的小部件示例，如按钮、表单元素、下拉菜单等，`basic.html`可能是基础样式或功能的展示。 4. `admin-form.html`：...
这两个文件可能包含AmazeUI的各种小部件，如按钮、下拉菜单、弹出框、时间线等，展示了如何在实际项目中使用这些组件。 4. **admin-form.html**: 这个文件可能展示了AmazeUI的表单（Form）组件，包括输入框、选择器...
`javascript` 文件夹包含了AmazeUI的JavaScript库和插件，这些文件提供了交互功能，如模态框、下拉菜单、轮播图等。开发者可以通过引用这些脚本实现动态效果和用户交互。 `ide` 可能包含了集成开发环境（IDE）的...
AmazeUI是一款开源的前端框架，专为移动优先的Web开发设计。它的核心特性是响应式布局，使得网站能够在各种屏幕尺寸的设备上流畅运行，包括手机、平板和桌面电脑。AmazeUI提供了丰富的组件和模块，其中包括表单元素...
5. **JavaScript组件**：Amaze UI 包含了许多JavaScript组件，如对话框、下拉菜单、轮播图等，这些组件在聊天界面中可能用于实现消息发送、表情选择、联系人列表等功能。JavaScript 还用于处理用户的交互事件，如...
这个压缩包包含两个使用AmazeUI开发的示例项目：一个针对PC端的网站（pc站版）和一个适用于移动设备的应用版本（app版），以及AmazeUI的触摸优化版源码（amazeui-touch-master.zip）和框架的官方链接（Amaze UI - ...
AmazeUI的组件包括但不限于按钮、表单、表格、下拉菜单、轮播图、侧滑导航等，这些组件都是经过精心设计和优化的，旨在提供一致的用户体验。 `admin-table.html`、`admin-index.html`、`admin-form.html`这三份文件...
AmazeUI的核心组件包括布局、表单、按钮、图标、下拉菜单、弹出层、滚动条等，这些都经过精心设计和优化，确保在各种设备上都能提供一致的体验。框架提供的CSS和JS经过gzip压缩后，大小控制在100kB左右，大大减少了...