To add links in a select and change the width of the select box before clicking

Asked

Viewed 32 times

1

I tried to add a link reference to an item in a list 'select' "number 2" and it was not possible, which solution should I join to link this item?? and it is also not possible to increase the width of the 'select' box before clicking, ?

option:hover{ background-color: #ff0; }
select option{ width: 200px; }
<form>

<select id="ctg" class="dt" name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
             
             <option value="1"> number 1</option>
             <option value="2"> <a href="https://c1.staticflickr.com/6/5005/5372580945_2988198c90.jpg">number 2</a></option>
             <option value="3"> number 3</option>
             <option value="4"> number 4</option>
             <option value="5"> number 5</option>
             <option value="6"> number 6</option>
             <option value="7"> number 7</option>
             <option value="8"> number 8</option>
             <option value="9"> number 9</option>
             
           </select>
</form>

1 answer

1


You cannot use tags in text options. First, to increase the height of the select, you can use onmouseover instead of onmousedown, to increase the box before clicking. And onmouseleave instead of onblur to get back to normal.

Second, you can put the URL on value of option and in the onchange redirect with location.href taking the respective value of option selected:

option:hover{ background-color: #ff0; }
select option{ width: 200px; }
<form>
  Selecione "number 2":
  <br>
   <select id="ctg" class="dt" name="select1" onmouseover="if(this.options.length>8){this.size=8;}"  onchange='location.href=this.value' onmouseleave="this.size=0;">
                
      <option value="URL_aqui"> number 1</option>
      <option value="https://c1.staticflickr.com/6/5005/5372580945_2988198c90.jpg">number 2</option>
      <option value="URL_aqui"> number 3</option>
      <option value="URL_aqui"> number 4</option>
      <option value="URL_aqui"> number 5</option>
      <option value="URL_aqui"> number 6</option>
      <option value="URL_aqui"> number 7</option>
      <option value="URL_aqui"> number 8</option>
      <option value="URL_aqui"> number 9</option>
   
   </select>
</form>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.