<script type="text/javascript">

</script>
<div class="pageContent">
    <form action="ajaxDone1.html" id="j_image_form" class="pageForm form-validate" method="post" callback="navTabAjaxDone" noEnter>
        <div class="pageFormContent" layouth="29">
            <table class="table table-condensed table-hover" width="100%">
                <thead>
                    <tr>
                        <th width="120" class="center">说明</th>
                        <th>样例</th>
                        <th>代码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_select1">自动宽度：</label>
                        </td>
                        <td>
                            <select name="select1" id="j_form_select1" class="selectpicker show-tick" data-style="btn-default btn-sel" data-width="auto">
                                <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><pre>&lt;select name=&quot;select1&quot; class=&quot;selectpicker show-tick&quot; 
    data-style=&quot;btn-default btn-sel&quot; data-width=&quot;auto&quot;&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_select2">固定宽度(200)：</label>
                        </td>
                        <td>
                            <select name="select2" id="j_form_select2" class="selectpicker show-tick" data-style="btn-default btn-sel" 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><pre>&lt;select name=&quot;select2&quot; class=&quot;selectpicker show-tick&quot; 
    data-style=&quot;btn-default btn-sel&quot; data-width=&quot;200&quot;&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_selectup">强制向上弹出：</label>
                        </td>
                        <td>
                            <select name="selectup" id="j_form_selectup" class="selectpicker show-tick dropup" data-style="btn-default btn-sel" data-width="auto" data-dropupauto="false">
                                <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>
                            <div class="alert alert-info form-block">* select添加Class：dropup，添加属性：data-dropupauto="false"。</div>
                        </td>
                        <td><pre>&lt;select name=&quot;select2&quot; class=&quot;selectpicker show-tick dropup&quot; 
    data-style=&quot;btn-default btn-sel&quot; data-height=&quot;150&quot; data-dropupauto=&quot;false&quot;&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_select3">固定高度(150)：</label>
                        </td>
                        <td>
                            <select name="select3" id="j_form_select3" class="selectpicker show-tick" data-style="btn-default btn-sel" data-width="auto" data-height="150">
                                <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><pre>&lt;select name=&quot;select2&quot; class=&quot;selectpicker show-tick&quot; 
    data-style=&quot;btn-default btn-sel&quot; data-height=&quot;150&quot;&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_select4">自动高度：</label>
                        </td>
                        <td>
                            <select name="select4" id="j_form_select4" class="selectpicker show-tick" data-style="btn-default btn-sel" data-width="auto">
                                <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><pre>&lt;select name=&quot;select2&quot; class=&quot;selectpicker show-tick&quot; 
data-style=&quot;btn-default btn-sel&quot; data-width=&quot;auto&quot;&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_select5">页面容器：</label>
                        </td>
                        <td>
                            <select name="select5" id="j_form_select5" class="selectpicker show-tick" data-style="btn-default btn-sel" data-width="auto" data-container="body">
                                <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>
                            <div class="alert alert-info form-block">* 页面容器是指将下拉列表放入body，默认是放在select元素的后面，这样超出pageContent的部分会被遮盖。</div>
                        </td>
                        <td><pre>&lt;select name=&quot;select5&quot; id=&quot;j_form_select5&quot; class=&quot;selectpicker show-tick&quot; 
    data-style=&quot;btn-default btn-sel&quot; data-width=&quot;auto&quot; data-container=&quot;body&quot;&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label x120" for="j_form_province">联动：</label>
                        </td>
                        <td>
                            <select name="province" id="j_form_province" class="selectpicker show-tick" data-style="btn-default btn-sel" data-width="auto" data-container="body" 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 class="selectpicker show-tick" name="city" id="j_form_city" data-style="btn-default btn-sel" data-width="auto" data-nextselect="#j_form_area" data-refurl="ajax/area_{value}.html" data-emptytxt="--城市--">
                                <option value="all">--城市--</option>
                            </select>
                            <select class="selectpicker show-tick" name="area" id="j_form_area" data-style="btn-default btn-sel" data-width="auto" data-emptytxt="--区县--">
                                <option value="all">--区县--</option>
                            </select>
                            <div class="alert alert-info form-block">* 属性说明：<br>data-nextselect：返回数据要插入的select元素选择器；<br>data-refurl：获取JSON数据的URL，其中{value}会自动替换为选择项的值提交；<br>data-emptytxt：未找到数据时的select占位option</div>
                        </td>
                        <td><pre>&lt;select name=&quot;province&quot; id=&quot;j_form_province&quot; class=&quot;selectpicker show-tick&quot; 
    data-style=&quot;btn-default btn-sel&quot; data-width=&quot;auto&quot; data-container=&quot;body&quot; 
    data-nextselect=&quot;#j_form_city&quot; data-refurl=&quot;ajax/city_{value}.html&quot;&gt;
        &lt;option value=&quot;all&quot;&gt;--省市--&lt;/option&gt;
        &lt;option value=&quot;bj&quot;&gt;北京&lt;/option&gt;
        &lt;option value=&quot;sh&quot;&gt;上海&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class=&quot;selectpicker show-tick&quot; name=&quot;city&quot; id=&quot;j_form_city&quot; 
        data-style=&quot;btn-default btn-sel&quot; data-width=&quot;auto&quot; data-nextselect=&quot;#j_form_area&quot; 
        data-refurl=&quot;ajax/area_{value}.html&quot; data-emptytxt=&quot;--城市--&quot;&gt;
        &lt;option value=&quot;all&quot;&gt;--城市--&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class=&quot;selectpicker show-tick&quot; name=&quot;area&quot; id=&quot;j_form_area&quot; 
        data-style=&quot;btn-default btn-sel&quot; data-width=&quot;auto&quot; 
        data-emptytxt=&quot;--区县--&quot;&gt;
        &lt;option value=&quot;all&quot;&gt;--区县--&lt;/option&gt;
&lt;/select&gt;</pre></td>
                    </tr>
                </tbody>
            </table>
            <br>
            <br>
            <p>* 更多参数请参见：<a href="http://silviomoreto.github.io/bootstrap-select/" target="_blank">http://silviomoreto.github.io/bootstrap-select/</a></p>
        </div>
        <div class="formBar">
            <ul>
                <li><button type="button" class="btn btn-close btn-sm">关闭</button></li>
            </ul>
        </div>
    </form>
</div>