<!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>
效果图：