加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
form-select.html 8.75 KB
一键复制 编辑 原始数据 按行查看 历史
<div class="bjui-pageContent">
<form action="ajaxDone1.html" id="j_form_form" class="pageForm" data-toggle="validate">
<div style="margin:15px auto 0; width:800px;">
<fieldset>
<legend>下拉选择框</legend>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th width="125"></th>
<th>样例</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right"><label class="label-control">自动宽高:</label></td>
<td>
<select data-toggle="selectpicker">
<option value="">全部</option>
<option value="1">下拉选项1</option>
<option value="2" selected="">下拉选项2</option>
<option value="3">下拉选项3</option>
<option value="4">下拉选项4</option>
</select>
</td>
<td>data-toggle="selectpicker"</td>
</tr>
<tr>
<td align="right"><label class="label-control">固定宽度:</label></td>
<td>
<select data-toggle="selectpicker" data-width="200">
<option value="">全部</option>
<option value="1">下拉选项1</option>
<option value="2" selected="">下拉选项2</option>
<option value="3">下拉选项3</option>
<option value="4">下拉选项4</option>
</select>
</td>
<td>data-toggle="selectpicker" data-width="200"</td>
</tr>
<tr>
<td align="right"><label class="label-control">多选:</label></td>
<td>
<select data-toggle="selectpicker" data-width="200" multiple>
<option value="">全部</option>
<option value="崇明">崇明</option><option value="黄浦">黄浦</option><option value="卢湾">卢湾</option><option value="徐汇">徐汇</option><option value="长宁">长宁</option><option value="静安">静安</option><option value="普陀">普陀</option><option value="闸北">闸北</option><option value="虹口">虹口</option><option value="杨浦">杨浦</option><option value="闵行">闵行</option><option value="宝山">宝山</option><option value="嘉定">嘉定</option><option value="浦东">浦东</option><option value="金山">金山</option><option value="松江">松江</option><option value="青浦">青浦</option><option value="南汇">南汇</option><option value="奉贤">奉贤</option><option value="朱家角">朱家角</option>
</select>
</td>
<td>data-toggle="selectpicker" multiple</td>
</tr>
<tr>
<td align="right"><label class="label-control">联动(二维数组):</label></td>
<td>
<select name="province" data-toggle="selectpicker" data-nextselect="#j_form_city" data-refurl="ajax/city_{value}.html">
<option value="all">--省市--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select name="city" id="j_form_city" data-toggle="selectpicker" data-nextselect="#j_form_area" data-refurl="ajax/area_{value}.html" data-emptytxt="--城市--">
<option value="all">--城市--</option>
</select>
<select name="area" id="j_form_area" data-toggle="selectpicker" data-emptytxt="--区县--">
<option value="all">--区县--</option>
</select>
</td>
<td>数据格式:二维数组</td>
</tr>
<tr>
<td align="right"><label class="label-control">联动(有初始值):</label></td>
<td>
<select name="province1" data-toggle="selectpicker" data-nextselect="#j_form_city1" data-refurl="ajax/city_{value}.html">
<option value="all">--省市--</option>
<option value="bj" selected>北京</option>
<option value="sh">上海</option>
</select>
<select name="city1" id="j_form_city1" data-toggle="selectpicker" data-nextselect="#j_form_area1" data-refurl="ajax/area_{value}.html" data-val="bj" data-emptytxt="--城市--">
<option value="all">--城市--</option>
</select>
<select name="area1" id="j_form_area1" data-toggle="selectpicker" data-val="朝阳" data-emptytxt="--区县--">
<option value="all">--区县--</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td align="right"><label class="label-control">联动(标准json):</label></td>
<td>
<select name="province" data-toggle="selectpicker" data-nextselect="#j_form_city2" data-refurl="ajax/json_city_{value}.html">
<option value="all">--省市--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select name="city" id="j_form_city2" data-toggle="selectpicker" data-nextselect="#j_form_area2" data-refurl="ajax/json_area_{value}.html" data-emptytxt="--城市--">
<option value="all">--城市--</option>
</select>
<select name="area" id="j_form_area2" data-toggle="selectpicker" data-emptytxt="--区县--">
<option value="all">--区县--</option>
</select>
</td>
<td>数据格式:标准json</td>
</tr>
<tr>
<td align="right"><label class="label-control">禁用:</label></td>
<td>
<select data-toggle="selectpicker" data-width="200" disabled>
<option value="">全部</option>
<option value="1">下拉选项1</option>
<option value="2" selected="">下拉选项2</option>
<option value="3">下拉选项3</option>
<option value="4">下拉选项4</option>
</select>
</td>
<td>disabled</td>
</tr>
<tr>
<td colspan="3">
<div class="alert alert-warning form-inline"><i class="fa fa-warning"></i> <strong>更多参数:</strong>详见<a href="http://silviomoreto.github.io/bootstrap-select/" target="_blank">http://silviomoreto.github.io/bootstrap-select/</a></div>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</form>
</div>
<div class="bjui-pageFooter">
<ul>
<li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
</ul>
</div>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化