请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
尚未选择
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>
|