Can a dropdown menu be editable?

前端 未结 4 786
野的像风
野的像风 2021-01-13 03:15

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 th

相关标签:
4条回答
  • 2021-01-13 03:42

    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.com/combobox.html
    • http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html
    • http://coffeescripter.com/code/editable-select/

    (All found by googling on html editable select)

    0 讨论(0)
  • 2021-01-13 03:45

    I made a complete 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)

    0 讨论(0)
  • 2021-01-13 03:45

    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>
    

    0 讨论(0)
  • 2021-01-13 03:50

    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.com/tags/tag_datalist.asp

    0 讨论(0)
提交回复
热议问题