html/css/javascript您现在的位置是:主页 > html/css/javascript >
select option标签默认展开
2023-03-15 20:03:57html/css/javascript 197人已围观
有个需求需要直接展开默认的select options, 而不是点击下select, option才会展开。
网上搜寻了一番后发现很多方法都不好用。然后根据网上的教程思路自己写代码吧。
select有个size属性,size 属性规定下拉列表中可见选项的数目。
那么我们就借助这个属性让他自动展开。
完整代码如下
<select id="mySelect"> <option name="test" value="" class="first">Select</option> <option name="test" value="" class="">Opt1</option> <option name="test" value="" class="">Opt2</option> <option name="test" value="" class="">Opt3</option> <option name="test" value="" class="">Opt4</option> <option name="test" value="" class="">Opt5</option> <option name="test" value="" class="">Opt6</option> <option name="test" value="" class="">Opt7</option> <option name="test" value="" class="">Opt8</option> <option name="test" value="" class="">Opt9</option> <option name="test" value="" class="">Opt10</option> <option name="test" value="" class="">Opt11</option> </select> <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script> document.getElementById("mySelect").size=document.getElementById("mySelect").length;//展开所有 //document.getElementById("mySelect").size=30;//指定展开的个数 </script>
完美自动展开。
专注中小企业网站建设,网站安全15年,熟悉各种CMS建站系统,善于解决各种网站疑难杂症。有需要请联系下方微信!
解决问题仅需10元起!
技术微信
扫码联系技术微信
---------------专业解决网站各种疑难杂症,可淘宝担保交易,安全无风险---------------
建站、仿站、二次开发、网站改版、网站修改、网站漏洞修复、网站被黑修复、网站安全、服务器安全等
点击了解更多 >>
下一篇:phpcms常见安全漏洞修复方法