标签：html javascript css option html-select

我试图使选择选项具有当前选定选项的宽度.

我的代码是“选择选项”下拉列表的标准HTML：

<select name="search_options">
  <option value="all">All</option>
  <option value="entertainment">Entertainment</option>
  <option value="newsandpolitics">News &amp; Politics</option>
  <option value="sports">Sports</option>
  <option value="lifestyle">Lifestyle</option>
  <option value="health">Health</option>
  <option value="scienceandtech">Science &amp; Tech</option>
</select>

我一直在尝试仅使用CSS或Javascript,而没有JQuery,但是我无法弄清楚.

我已经找到了一些使用JQuery的小提琴,但是没有CSS / Javascript的小提琴.

http://jsfiddle.net/5AANG/4/

http://jsfiddle.net/qqcc5/

是否有任何方法可以使用CSS或纯Javascript与上述2个小提琴相同？

任何指向正确方向的指针都将是很好的.

解决方法:

根据您的第二个链接,您可以这样操作：

var selectId = document.getElementById("yourSelect");

selectId.onchange=function(){
   var selectedValue = selectId.options[selectId.selectedIndex].value; 
   var selectedText = selectId.options[selectId.selectedIndex].text;

   selectId.style.width = 20 + (selectedText.length * 8) + "px";
}

测试：
http://jsfiddle.net/ndquxquu/

标签：html,javascript,css,option,html-select
来源： https://codeday.me/bug/20191011/1892416.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。