html基础之select ，datalist与details的异同

男娘i 2023-06-18 04:55 13阅读 0赞

### 异同点 ###

<table> 
 <thead> 
  <tr> 
   <th>异同点</th> 
   <th>select</th> 
   <th>datalist</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>多选</td> 
   <td>可以</td> 
   <td>不可以</td> 
  </tr> 
  <tr> 
   <td>缺失值</td> 
   <td>可以</td> 
   <td>不可以</td> 
  </tr> 
  <tr> 
   <td>查找</td> 
   <td>不可以</td> 
   <td>可以</td> 
  </tr> 
  <tr> 
   <td>增添选项</td> 
   <td>不可以</td> 
   <td>可以</td> 
  </tr> 
 </tbody> 
</table>

### 使用方法 ###

#### select=》optgroup可以不用添加，直接使用option也是可以的 ####

有几个常用属性值  
　　select属性  
　　　　size 　　　=》　　显示几个，默认如下图，，显示一个  
　　　　multiple 　 =》　　多选，按住ctrl  
　　option属性  
　　　　selected 　=》　　默认选中项

**需要注意的值，option在select中，option使用value不显示，在datalist中会显示**

<select>
                <optgroup label="北京（组名)">
                    <option>东城区</option>
                    <option>东城区</option>
                </optgroup>
                <optgroup label="青岛">
                    <option>李沧区</option>
                    <option>李沧区</option>
                </optgroup>
            </select>
            
    
            <select>
                    <option>东城区</option>
                    <option>东城区</option>
                    <option>李沧区</option>
                    <option>李沧区</option>
            </select>
            
    
            <select>
                <optgroup label="北京（组名)">
                    <option value="123"></option>
                    <option>东城区</option>
                </optgroup>
                <optgroup label="青岛">
                    <option>李沧区</option>
                    <option>李沧区</option>
                </optgroup>
            </select>

![20191130135414196.png][] ![20191130135338497.png][] ![20191130140908542.png][]

#### datalist =》需要注意的datalist的id需要与input的list属性一致 ####

当准备输出时input下方会自动出现option的选项，datalist具有模糊查询的作用，比如在文本框中输入“路”，则推荐的内容为电路原理，数字电路以及模拟电路。以下是效果图：

<input type="text" list="mylist1">
        <datalist id="mylist1">
            <option value="电路原理">
            <option value="数字电路">
            <option value="模拟电路">
            <option value="计算机原理">
        </datalist>
        
    
        <input type="text" list="mylist1">
        <datalist id="mylist1">
            <option >电路原理</option>
            <option >数字电路</option>
            <option >模拟电路</option>
            <option >计算机原理</option>
        </datalist>
     
    	 <input type='text' name='capital' list='capitals' />
         <datalist id='capitals'>
                <option value='bj'>北京</option>
                <option value='jn'>山东</option>
                <option value='zhzh'>河南</option>
            </datalist>

![20191130150314323.png][] ![20191130135947373.png][] ![20191130140700124.png][]

#### datails =》和上面的要区分开 ####

<details>
            <summary>世界</summary>
            <p>世界上有哪些国家</p>
            <ul>
                <li>中国</li>
                <li>美国</li>
            </ul>
        </details>
    
        
        <details open>
            
            <summary>世界</summary>
            <p>世界上有哪些国家</p>
            <ul>
                <li>中国</li>
                <li>美国</li>
            </ul>
        </details>

![20191202204825389.png][] ![20191202204801765.png][]

[20191130135414196.png]: https://img-blog.csdnimg.cn/20191130135414196.png
[20191130135338497.png]: https://img-blog.csdnimg.cn/20191130135338497.png
[20191130140908542.png]: https://img-blog.csdnimg.cn/20191130140908542.png
[20191130150314323.png]: https://img-blog.csdnimg.cn/20191130150314323.png
[20191130135947373.png]: https://img-blog.csdnimg.cn/20191130135947373.png
[20191130140700124.png]: https://img-blog.csdnimg.cn/20191130140700124.png
[20191202204825389.png]: https://img-blog.csdnimg.cn/20191202204825389.png
[20191202204801765.png]: https://img-blog.csdnimg.cn/20191202204801765.png