如何在用户想要选择选项后展开“选择”选项宽度 [英] How to expand 'select' option width after the user wants to select an option

问题描述

也许这是一个容易的问题，也许不是。我有一个选择框，我硬编码宽度。说出120像素。

 < select style =width：120px> < option>真正的长文本，真正的长文本，真正的长文本< / option> < option> ABC< / option>< / select>  

我想能够显示第二个选项，以便用户可以看到文本的全部长度。

与其他一切一样。

解决方案

如果你有选项预先存在于固定的< select> ，并且你不想以编程方式改变宽度，除非你有一点创意。

• 您可以尝试为每个选项设置 title 属性。这是非标准的HTML（如果你在这里关注这个小小的违规），但IE（和Firefox）也将鼠标悬停在鼠标弹出窗口中显示整个文本。


• 当用户选择某些东西时，可以使用JavaScript来显示一些定位的DIV中的文本。 IMHO这是不太好的方法，因为它需要JavaScript工作在所有的工作，它只能在之后选择的


• 根本不使用选择框，但使用其他标记和CSS实现其功能。 如果您稍后通过JavaScript添加一个长选项，请查看这里：如何在IE中动态更新HTML选择框

  
  

  Maybe this is an easy question, maybe not. I have a select box where I hardcode with width. Say 120px.

  <select style="width: 120px">
    <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
    <option>ABC</option>
  </select>

  I want to be able to show the second option so that the user can see the full length of the text.

  Like everything else. This works fine in Firefox, but doesn't work with Internet Explorer6.

  解决方案

  If you have the option pre-existing in a fixed-with <select>, and you don't want to change the width programmatically, you could be out of luck unless you get a little creative.

  • You could try and set the title attribute to each option. This is non-standard HTML (if you care for this minor infraction here), but IE (and Firefox as well) will display the entire text in a mouse popup on mouse hover.
  • You could use JavaScript to show the text in some positioned DIV when the user selects something. IMHO this is the not-so-nice way to do it, because it requires JavaScript on to work at all, and it works only after something has been selected - before there is a change in value no events fire for the select box.
  • You don't use a select box at all, but implement it's functionality using other markup and CSS. Not my favorite but I wanted to mention it.

  If you are adding a long option later through JavaScript, look here: How to update HTML "select" box dynamically in IE

  这篇关于如何在用户想要选择选项后展开“选择”选项宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！