HTML中三种下拉列表的写法

一，<details></details>配合<summary></summary>（选项卡不可选）

 <details open="true">
//open属性决定在页面加载时选项卡是否展开，值为true时为展开，false时为收合
        <summary>选项卡一</summary>
        <summary>选项卡二</summary>
        <summary>选项卡三</summary>
    </details>

二，form表单配合select>optgroup>option使用

<from>
<select name="city">
			<optgroup label="选项卡组名" disabled>
				<option value="one">选项卡一</option>
				<option value="two">选项卡二</option>
                <option value="three">选项卡三</option>
				<!-- selected默认选中 -->
				<option value="two" selected>柳州</option>
			</optgroup>
		</select>
	</form>

三，form表单配合input，配合datalist>option使用

<from action="xxx">
<!-- action 属性决定提交后表单提交向何处 -->
    <input type="text" list="input_ref">
<!-- list属性设置给input输入框 和输入框绑定-->
    <datalist id="input_ref">
<!-- 给datalist设置id名设置成和input中list属性值一样 -->
        <option>选项卡一</option>
        <option>选项卡二</option>
        <option>选项卡三</option>
    </datalist>