广告
广告
html/css/javascript您现在的位置是:主页 > html/css/javascript >

select option标签默认展开

2023-03-15 20:03:57html/css/javascript 443人已围观

有个需求需要直接展开默认的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>


完美自动展开。

 


扫码添加技术微信【解决问题,仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易,安全无风险

广告
广告
技术微信