如何在HTML中创建可编辑的下拉列表？

I'd like to create a text field with a dropdown list that lets the user choose some predefined values. The user should also be able to type a new value or select a predefined one from a dropdown list. I know that I can use two widgets for that but in my app it would be more ergonomnic if it was unified in a one widget.

我想创建一个带有下拉列表的文本字段，该列表允许用户选择一些预定义的值。用户还应该能够键入新值或从下拉列表中选择预定义值。我知道我可以使用两个小部件，但在我的应用程序中，如果它在一个小部件中统一，那将更符合人体工程学。

Is there a standard widget or do I have to use a third party javascript?

有标准小部件还是我必须使用第三方JavaScript？

How about browser portability?

浏览器的可移植性怎么样？

9 个解决方案

#1

The best way to do this is probably to use a third party library.

最好的方法是使用第三方库。

There's an implementation of what you're looking for in jQuery UI and in dojo. jQuery is more popular, but dojo allows you to declaratively define widgets in HTML, which sounds more like what you're looking for.

在jQuery UI和dojo中有一个你正在寻找的实现。 jQuery更受欢迎，但是dojo允许您以声明方式定义HTML中的小部件，这听起来更像是您正在寻找的内容。

Which one you use will depend on your style, but both are developed for cross browser work, and both will be updated more often than copy and paste code.

您使用哪一个取决于您的风格，但两者都是为跨浏览器工作而开发的，并且两者都会比复制和粘贴代码更频繁地更新。

#2

You can accomplish this by using the <datalist> tag in HTML5.

您可以使用HTML5中的标记来完成此操作。

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="Pen">Pen</option>
    <option value="Pencil">Pencil</option>
    <option value="Paper">Paper</option>
</datalist>

If you double click on the input text in the browser a list with the defined option will appear.

如果双击浏览器中的输入文本，将显示带有已定义选项的列表。

#3

This can be achieved with the help of plain HTML, CSS and JQuery. I have created a sample page:

这可以通过纯HTML，CSS和JQuery来实现。我创建了一个示例页面：

$(document).ready(function(){
   
    $(".editableBox").change(function(){         
        $(".timeTextBox").val($(".editableBox option:selected").html());
    });
});

.editableBox {
    width: 75px;
    height: 30px;
}

.timeTextBox {
    width: 54px;
    margin-left: -78px;
    height: 25px;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <select class="editableBox">        
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="23">23:00</option>
        <option value="24">24:00</option>
    </select>
    <input class="timeTextBox" name="timebox" maxlength="5"/>
</div>

#4

The <select> tag only allows the use of predefined entries. The typical solution to your problem is to have one entry labeled 'Other' and a disabled edit field (<input type="text"). Add some JavaScript to enable the edit field only when 'Other' is selected.

It may be possible to somehow create a dropdown that allows direct editing, but IMO that is not worth the effort. If it was, Amazon, Google or Microsoft would be doing it ;-) Just get the job done with the least complicated solution. It as faster (your boss may like that) and usually easier to maintain (you may like that).

有可能以某种方式创建一个允许直接编辑的下拉列表，但IMO不值得付出努力。如果是这样，亚马逊，谷歌或微软将会这样做;-)只需用最简单的解决方案完成工作。它更快（你的老板可能喜欢）并且通常更容易维护（你可能会喜欢）。

#5

Very simple implementation (only basic functionality) based on CSS and one line of JS code

基于CSS和一行JS代码的非常简单的实现（仅基本功能）

<div class="dropdown">
    <input type="text" />
    <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
        <option>This is option 1</option>
        <option>Option 2</option>
    </select>
</div>

Please note: it uses previousElementSibling which is not supported in older browsers (below IE9)

请注意：它使用旧版浏览器不支持的previousElementSibling（IE9以下）

.dropdown {
    position: relative;
    width: 200px;
}
.dropdown select
{
    width: 100%;
}
.dropdown > * {
    box-sizing: border-box;
    height: 1.5em;
}
.dropdown select {
}
.dropdown input {
    position: absolute;
    width: calc(100% - 20px);
}

Here it is on JSFiddle

这是JSFiddle

#6

ComboBox with TextBox (For Pre-defined Values as well as User-defined Values.)

带有TextBox的ComboBox（用于预定义值以及用户定义的值。）

ComboBox with TextBox (Click Here)

ComBoxBox with TextBox（点击这里）

#7

I am not sure there is a way to do it automatically without javascript.

我不确定有没有办法在没有javascript的情况下自动执行此操作。

What you need is something which runs on the browser side to submit your form back to the server when they user makes a selection - hence, javascript.

您需要的是在浏览器端运行的东西，以便在用户进行选择时将表单提交回服务器 - 因此，javascript。

Also, ensure you have an alternate means (i.e. a submit button) for those who have javascript turned off.

此外，请确保为已关闭javascript的用户提供备用方式（即提交按钮）。

A good example: Combo-Box Viewer

一个很好的例子：组合框查看器

I had even a more sophisticated combo-box yesterday, with this dhtmlxCombo , using ajax to retrieve pertinent values amongst large quantity of data.

我昨天甚至还有一个更复杂的组合框，使用这个dhtmlxCombo，使用ajax在大量数据中检索相关值。

#8

A combobox is unfortunately something that was left out of the HTML specifications.

遗憾的是，组合框不符合HTML规范。

The only way to manage it, rather unfortunately, is to roll your own or use a pre-built one. This one looks quite simple. I use this one for an open-source app although unfortunately you have to pay for commercial usage.

不幸的是，管理它的唯一方法是自己滚动或使用预先构建的方法。这个看起来很简单。我将这个用于开源应用程序，但不幸的是你必须为商业用途付费。

#9

A little CSS and you are done fiddle

一点点CSS，你完成了小提琴

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

#1