select标签应用举例
<style>#mama { margin-top: 10px; padding: 10px; }
#mama > p { margin: 8px 0; }
#myselect {
margin-right: 10px;
}
#myselect option:nth-of-type(1) {
background: tan;
}
</style>
<div id="mama">
<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>
<p><br><br></p>
<p>HTML的<span style="background-color: sandybrown;"> select </span>标签用来制作下拉菜单，其菜单子项由 <option>菜单名称</option> 实现。代码如下：</p><p> <select><br> <option>菜单1</option><br> <option>菜单2</option><br> <option>菜单3</option><br> </select></p><p>通常，option还应有一个 value 值，该值可以被JS读取，拥有该值可以为子菜单提供更多的作为操作菜单项的信息。所以，<font color="#8b0000"><option>菜单1</option></font> 可以写成 <font color="#8b0000"><option </font><font color="#ff0000">value=</font><font color="#ff00ff">"生鱼片"</font><font color="#8b0000">>菜单1</option></font>，这样option所能携带的信息量更大，为后续的操作提供更大的空间。</p><p>select标签没有自己的标题，一般会利用 option 的首项充当，如本帖的示例所展示的，第一个菜单项是 “--选择类型--”，且它不参与到被选择的对象中来。处理机制非常巧妙，我是利用了select标签的一些特点来完成的，具体说明如下：</p><p>select标签一般通过 onchange 事件来俘获用户选择了那个菜单项目，第一项放在第一位，单击它的时候 onchange 事件不会被触发（除非设计了 onclick 事件），而在 onchange 事件中，当工作完成，我将第一项菜单设置为 selected 状态，等于重置了 select 标签的初始状态，故此，第一项永远不会在 onchange 事件中得到触发。对应上述机制，第一项菜单的value值可有可无（一般设置为无）。</p><p>下面是本帖示例的完整代码:</p><div class="blockcode"><blockquote><style><br>#myselect {<br> margin-right: 10px;<br>}<br>#myselect option:nth-of-type(1) {<br> background: tan;<br>}<br></style><br><br><select id="myselect"><br> <option value="">--选择类型--</option><br> <option value="No.1">诗经</option><br> <option value="No.2">乐府</option><br> <option value="No.3">楚辞</option><br> <option value="No.4">唐诗</option><br> <option value="No.5">宋词</option><br> <option value="No.6">元曲</option><br></select><br><span id="result">尚未选择</span><br><br><script><br>myselect.onchange = () => {<br> let idx = myselect.selectedIndex;<br> let val = myselect.options.value;<br> let txt = myselect.options.text;<br> result.innerText = '选择结果：' + val + ' ' + txt;<br> myselect.options.selected = true;<br>};<br></script></blockquote></div><p><br></p>
</div>
<script>
myselect.onchange = () => {
let idx = myselect.selectedIndex;
let val = myselect.options.value;
let txt = myselect.options.text;
result.innerText = '选择结果：' + val + ' ' + txt;
myselect.options.selected = true;
};
</script> 在 html 模式下所贴的代码没有行号、没有缩进，再贴一次：
<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.value;
let txt = myselect.options.text;
result.innerText = '选择结果：' + val + ' ' + txt;
myselect.options.selected = true;
};
</script>
select 标签可以直接制作出下拉菜单，真不错啊{:4_187:} 红影 发表于 2023-1-12 10:33
select 标签可以直接制作出下拉菜单，真不错啊
这个很实用 马黑黑 发表于 2023-1-12 11:07
这个很实用
嗯嗯，需要使用的时候，的确是很好用的一个标签呢{:4_187:} 红影 发表于 2023-1-12 12:21
嗯嗯，需要使用的时候，的确是很好用的一个标签呢
所有的都是有用的，就看会不会用、想不想用 马黑黑 发表于 2023-1-12 12:27
所有的都是有用的，就看会不会用、想不想用
是的，尤其需要用代码实现一些功能，各种标签的确很派用处。 红影 发表于 2023-1-12 13:01
是的，尤其需要用代码实现一些功能，各种标签的确很派用处。
那是自然 没整明白{:4_198:} 马黑黑 发表于 2023-1-12 13:13
那是自然
黑黑讲解了这么多标签，真棒{:4_187:} 红影 发表于 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
就是，把你的诗文分类，放入不同的菜单中，然后用户点击某个菜单，就可以进入你的分类：怜香惜玉诗、风景 ...
哈，这个功能很好{:4_178:} 马黑黑 发表于 2023-1-12 21:09
很多很多。浏览器要描述的东西多，标签的出现也就会越来越多
听着就觉得记不住{:4_173:} 红影 发表于 2023-1-12 21:30
听着就觉得记不住
所以有时候要查文档 樵歌 发表于 2023-1-12 21:25
哈，这个功能很好
{:4_181:} 马黑黑 发表于 2023-1-12 22:37
早上好{:4_190:} 马黑黑 发表于 2023-1-12 22:36
所以有时候要查文档
嗯，文档很重要。