select option

The drop-down box can only select existing values , You can't type it yourself .

<select>
<optgroup label=" At home ">
<option value="gz"> Guangzhou </option>
<option value="sz"> Shenzhen </option>
<option value="bj" selected> Beijing </option>
</optgroup>
<optgroup label=" Abroad ">
<option value="ld"> London </option>
<option value="ny"> New York </option>
<option value="xn"> Sydney </option>
</optgroup>
</select>
 Copy code 

datalist

The user can input , Can automatically match . value The value of is also related to select option The method is different .

<input type="text" list="city1">
<datalist id="city1">
<option value="gz"> Guangzhou </option>
<option value="sz"> Shenzhen </option>
<option value="bj"> Beijing </option>
</datalist>
<br>
<!-- Abbreviation -->
<input type="text" list="city2">
<datalist id="city2">
<option value=" Guangzhou ">
<option value=" Shenzhen ">
<option value=" Beijing ">
</datalist>
 Copy code