All geek questions in one place

Can I change the dropdown menu?

I have a drop-down menu in which I show 2-3 client identifiers. Now the user wants to enter a customer ID that does not appear in the drop-down menu. Can I change the dropdown menu?

+4
source share
4 answers

If you are interested in whether it is possible to make <select> -input editable, the answer is no (not without some java script).

You can, for example, try one of them:

(Everything found in googling on html editable select)

+2
source

I made a full working example of atom217 code (he missed the function)

 <script> function E(id) { return document.getElementById(id); } function changeit(drp,txf) { dd = E(drp); E(txf).value = dd.options[ dd.selectedIndex ].text; } </script> <div style="position:relative; top:0px; left:0px;" > <input type="text" id="TextField" style="width:140px; position:absolute; top:1px; left:1px; z-index:2; border:none;" /> <select id="DropDown" onchange="changeit('DropDown','TextField')" style="position: absolute; top: 0px; left: 0px; z-index: 1; width: 165px;" > <option selected="selected" disabled="disabled">-- Select Column --</option> <option> example option one </option> <option> example option two </option> </select> </div>

Just tried it. Works on my 4 target browsers. (I was looking for this too)

+2
source

you can try to do this with CSS

try code (fiddle)

  <div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv"> <input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px; position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" /> <div style="position: absolute;" id="filterDropdownDiv"> <select name="filterDropDown" id="filterDropDown" tabindex="1000" onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute; top: 0px; left: 0px; z-index: 1; width: 165px;"> <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option> </select>

0
source

For future reference: it is now available in HTML5:

 <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

https://www.w3schools.com/tags/tag_datalist.asp

-1
source

Source: https://habr.com/ru/post/1337511/

More articles:


All Articles