<form data-toggle="topjui-form">

    <div class="topjui-container">

        <fieldset>

            <legend>调用本地数据</legend>

        </fieldset>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">性别</label>

                <div class="topjui-input-block">

                    <input type="text" name="sex"

                           data-toggle="topjui-combobox"

                           data-options="data:[{value:1,text:'男'},{value:2,text:'女'}]">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">学历（必填）</label>

                <div class="topjui-input-block">

                    <input type="text" name="degree"

                           data-toggle="topjui-combobox"

                           data-options="required:true,

                       valueField:'id',

                       textField:'text',

                       data:[{id:1,text:'大专'},{id:2,text:'本科'},{id:3,text:'研究生'},{id:4,text:'博士生'}]">

                </div>

            </div>

        </div>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">渲染下拉项</label>

                <div class="topjui-input-block">

                    <input type="text" name="degree"

                           data-toggle="topjui-combobox"

                           data-options="required:true,

                           prompt:'使用formatter属性渲染下拉项',

                       valueField:'id',

                       textField:'text',

                       formatter:formatter,

                       data:[{id:2,text:'本科-某大学'},{id:3,text:'研究生-某大学'},{id:4,text:'博士生-某大学'}]">

                </div>

            </div>

        </div>

        <fieldset>

            <legend>调用远程数据</legend>

        </fieldset>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">籍贯</label>

                <div class="topjui-input-block">

                    <input type="text" name="nativePlace"

                           data-toggle="topjui-combobox"

                           data-options="panelHeight:250,

                       valueField:'id',

                       url:_ctx + '/json/combobox/nativePlace.json'">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">民族（必填）</label>

                <div class="topjui-input-block">

                    <input type="text" name="nation"

                           data-toggle="topjui-combobox"

                           data-options="required:true,

                       prompt:'必填',

                       panelHeight:250,

                       valueField:'id',

                       url:_ctx + '/json/combobox/nation.json'">

                </div>

            </div>

        </div>

        <fieldset>

            <legend>多级联动下拉框（主动级联，上级触发下级）</legend>

        </fieldset>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">国家</label>

                <div class="topjui-input-block">

                    <input type="text" name="country"

                           data-toggle="topjui-combobox"

                           data-options="panelHeight:250,

                       url:_ctx + '/json/combobox/country.json',

                       valueField: 'id',

                       childCombobox:{

                           id:'province',

                           url:remoteHost+'/system/codeItem/getListByPid?pid={parentValue}'

                       }">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">省份</label>

                <div class="topjui-input-block">

                    <input type="text" name="province"

                           data-toggle="topjui-combobox"

                           data-options="id:'province',

                       panelHeight:250,

                       valueField: 'id',

                       childCombobox:{

                           id:'city',

                           url:remoteHost+'/system/codeItem/getListByPid?pid={parentValue}'

                       }">

                </div>

            </div>

        </div>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">城市</label>

                <div class="topjui-input-block">

                    <input type="text" name="city"

                           data-toggle="topjui-combobox"

                           data-options="id:'city',

                       panelHeight:250,

                       valueField: 'id',

                       childCombobox:{

                           id:'district',

                           url:remoteHost+'/system/codeItem/getListByPid?pid={parentValue}'

                       }">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">区县</label>

                <div class="topjui-input-block">

                    <input type="text" name="district"

                           data-toggle="topjui-combobox"

                           data-options="id:'district',

                       panelHeight:250,

                       valueField: 'id'">

                </div>

            </div>

        </div>

        <fieldset>

            <legend>多级联动下拉框（被动级联，下级获取上级）</legend>

        </fieldset>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">国家</label>

                <div class="topjui-input-block">

                    <input type="text" name="country2"

                           data-toggle="topjui-combobox"

                           data-options="panelHeight:250,

                       valueField: 'id',

                       url:_ctx + '/json/combobox/country.json'">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">省份</label>

                <div class="topjui-input-block">

                    <input type="text" name="province2"

                           data-toggle="topjui-combobox"

                           data-options="id:'province2',

                       panelHeight:250,

                       valueField: 'id',

                       url:remoteHost+'/system/codeItem/getListByPid?pid={country2}'">

                </div>

            </div>

        </div>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">城市</label>

                <div class="topjui-input-block">

                    <input type="text"

                           name="city2"

                           data-toggle="topjui-combobox"

                           data-options="id:'city2',

                       panelHeight:250,

                       valueField: 'id',

                       url:remoteHost+'/system/codeItem/getListByPid?pid={province2}'">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">区县</label>

                <div class="topjui-input-block">

                    <input type="text"

                           name="district2"

                           data-toggle="topjui-combobox"

                           data-options="id:'district2',

                       panelHeight:250,

                       valueField: 'id',

                       url:remoteHost+'/system/codeItem/getListByPid?pid={city2}'">

                </div>

            </div>

        </div>

    </div>

</form>