select标签应用举例

马黑黑

--选择类型-- 诗经 乐府 楚辞 唐诗 宋词 元曲 尚未选择

HTML的 select 标签用来制作下拉菜单，其菜单子项由 <option>菜单名称</option> 实现。代码如下：

    <select>
        <option>菜单1</option>
        <option>菜单2</option>
        <option>菜单3</option>
    </select>

通常，option还应有一个 value 值，该值可以被JS读取，拥有该值可以为子菜单提供更多的作为操作菜单项的信息。所以，<option>菜单1</option> 可以写成 <option value="生鱼片">菜单1</option>，这样option所能携带的信息量更大，为后续的操作提供更大的空间。

select标签没有自己的标题，一般会利用 option 的首项充当，如本帖的示例所展示的，第一个菜单项是 “--选择类型--”，且它不参与到被选择的对象中来。处理机制非常巧妙，我是利用了select标签的一些特点来完成的，具体说明如下：

select标签一般通过 onchange 事件来俘获用户选择了那个菜单项目，第一项放在第一位，单击它的时候 onchange 事件不会被触发（除非设计了 onclick 事件），而在 onchange 事件中，当工作完成，我将第一项菜单设置为 selected 状态，等于重置了 select 标签的初始状态，故此，第一项永远不会在 onchange 事件中得到触发。对应上述机制，第一项菜单的value值可有可无（一般设置为无）。

下面是本帖示例的完整代码:

<style>
#myselect {
margin-right: 10px;
}
#myselect option:nth-of-type(1) {
background: tan;
}
</style>

<select id="myselect">
<option value="">--选择类型--</option>
<option value="No.1">诗经</option>
<option value="No.2">乐府</option>
<option value="No.3">楚辞</option>
<option value="No.4">唐诗</option>
<option value="No.5">宋词</option>
<option value="No.6">元曲</option>
</select>
<span id="result">尚未选择</span>

<script>
myselect.onchange = () => {
let idx = myselect.selectedIndex;
let val = myselect.options[idx].value;
let txt = myselect.options[idx].text;
result.innerText = '选择结果：' + val + ' ' + txt;
myselect.options[0].selected = true;
};
</script>

马黑黑

在 html 模式下所贴的代码没有行号、没有缩进，再贴一次：

1. <style>
   
2. #myselect {
   
3.         margin-right: 10px;
   
4. }
   
5. #myselect option:nth-of-type(1) {
   
6.         background: tan;
   
7. }
   
8. </style>
   
9. 
   
10. <select id="myselect">
    
11.         <option value="">--选择类型--</option>
    
12.         <option value="No.1">诗经</option>
    
13.         <option value="No.2">乐府</option>
    
14.         <option value="No.3">楚辞</option>
    
15.         <option value="No.4">唐诗</option>
    
16.         <option value="No.5">宋词</option>
    
17.         <option value="No.6">元曲</option>
    
18. </select>
    
19. <span id="result">尚未选择</span>
    
20. 
    
21. <script>
    
22. myselect.onchange = () => {
    
23.         let idx = myselect.selectedIndex;
    
24.         let val = myselect.options[idx].value;
    
25.         let txt = myselect.options[idx].text;
    
26.         result.innerText = '选择结果：' + val + ' ' + txt;
    
27.         myselect.options[0].selected = true;
    
28. };
    
29. </script>

复制代码

红影

select 标签可以直接制作出下拉菜单，真不错啊

马黑黑

红影 发表于 2023-1-12 10:33
select 标签可以直接制作出下拉菜单，真不错啊

这个很实用

红影

马黑黑 发表于 2023-1-12 11:07
这个很实用

嗯嗯，需要使用的时候，的确是很好用的一个标签呢

马黑黑

红影 发表于 2023-1-12 12:21
嗯嗯，需要使用的时候，的确是很好用的一个标签呢

所有的都是有用的，就看会不会用、想不想用

红影

马黑黑 发表于 2023-1-12 12:27
所有的都是有用的，就看会不会用、想不想用

是的，尤其需要用代码实现一些功能，各种标签的确很派用处。

马黑黑

红影 发表于 2023-1-12 13:01
是的，尤其需要用代码实现一些功能，各种标签的确很派用处。

那是自然

樵歌

没整明白

红影

马黑黑 发表于 2023-1-12 13:13
那是自然

黑黑讲解了这么多标签，真棒

马黑黑

红影 发表于 2023-1-12 13:54
黑黑讲解了这么多标签，真棒

标签没讲到的还不少呢

马黑黑

樵歌 发表于 2023-1-12 13:49
没整明白

就是，把你的诗文分类，放入不同的菜单中，然后用户点击某个菜单，就可以进入你的分类：怜香惜玉诗、风景诗、怀古散文、孤芳自赏 文集……

红影

马黑黑 发表于 2023-1-12 19:04
标签没讲到的还不少呢

主要是太多了。

马黑黑

红影 发表于 2023-1-12 20:21
主要是太多了。

很多很多。浏览器要描述的东西多，标签的出现也就会越来越多

樵歌

马黑黑 发表于 2023-1-12 19:10
就是，把你的诗文分类，放入不同的菜单中，然后用户点击某个菜单，就可以进入你的分类：怜香惜玉诗、风景 ...

哈，这个功能很好

红影

马黑黑 发表于 2023-1-12 21:09
很多很多。浏览器要描述的东西多，标签的出现也就会越来越多

听着就觉得记不住

马黑黑

红影 发表于 2023-1-12 21:30
听着就觉得记不住

所以有时候要查文档

马黑黑

樵歌 发表于 2023-1-12 21:25
哈，这个功能很好

樵歌

马黑黑 发表于 2023-1-12 22:37

早上好

红影

马黑黑 发表于 2023-1-12 22:36
所以有时候要查文档

嗯，文档很重要。