How to Show Extended Option in Select List

How to show extended option in select list?

This is a bug in IE, and there is no way to solve it, apart from making the select box wider:

<select style="width: 500px;">
  <option value="1">
    This is a very long option, but it's cool, cause the select is also very long
  </option>
</select>

Another alternative is to use a framework that will replace the selectbox with a styled combination of other elements. They will behave like a selectbox, but require javascript to work.

How to extend number of options in select tag using d3?

Instead selectAll option pass null.

var opts = selector.selectAll(null)

var data = {  'a': {    'aa': 'aa'  },  'b': {    'bb': 'bb'  },  'c': {    'cc': 'cc'  }}
var options = []Object.keys(data).map(function (k) {  options.push(k)})
var selector = d3.select('#myid')var opts = selector.selectAll(null)    .data(options.sort())    .enter()    .append('option')    .attr('value', function (d) {      return d    })    .text(function (d) {      return d    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><select id='myid' name='name' class='form-control'>  <option disabled selected>Select one item</option></select>

How to show dropdown expanded automatically so that it displays all the options when page loaded

You could write in your HTML code:

   <select size="3" name="test" id="test">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
   </select>

and then via javascript set a timer that after while changes the select box size attribute to 1.
For instance at the end of your page (before the clsed body tag) place this code:

<script type="text/javascript">
   window.setTimeout(function() { document.getElementById('test').size = 1; }, 5000); //5000 = 5 seconds
</script>

How to expand 'select' option width after the user wants to select an option

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 its 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

Shorten long options in a select options list

you can try this http://jsfiddle.net/BJ8WK/

$("#groupId option").each(function()
{
    if($(this).text().length>10)
     {
        $(this).text($(this).text().substring(0, 10));
     }
});

---

Related Topics