javascript - Can a dropdown menu be editable? - Stack Overflow

admin管理员组

文章数量:1278653

I have a dropdown menu in that I'm displaying 2-3 customer ids. Now,user wants to enter a customer id which doesn't appear in the drop down menu. Is it possible to make the drop down menu editable ?

I have a dropdown menu in that I'm displaying 2-3 customer ids. Now,user wants to enter a customer id which doesn't appear in the drop down menu. Is it possible to make the drop down menu editable ?

• javascript
• html
• css

Share Improve this question Follow edited Jan 28, 2011 at 18:23 BalusC 1.1m376376 gold badges3.6k3.6k silver badges3.6k3.6k bronze badges asked Jan 28, 2011 at 18:12 RMaRMa 11122 gold badges77 silver badges1818 bronze badges 1

• 3 An editable dropdown is called a bobox. Now you have a new search keyword ;) This is by the way not specifically related to JSP since all it basically does is generating/serving HTML/CSS which you in turn still have to write in the template yourself. Your problem is more in the HTML area. I'll edit the necessary tags. – BalusC Commented Jan 28, 2011 at 18:20

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

If you're wondering if a <select>-input can be made editable, the answer is, no, (not without some cleaver Javascripting).

You could for instance try out one of these:

• http://chakrabarty./bobox.html
• http://www.dhtmlgoodies./scripts/form_widget_editable_select/form_widget_editable_select.html
• http://coffeescripter./code/editable-select/

(All found by googling on html editable select)

I made a plete working example of atom217's code (he's missing 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 also looking for this)

you can try doing that using CSS

try following 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>

For future reference: it's 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./tags/tag_datalist.asp

本文标签： javascriptCan a dropdown menu be editableStack Overflow