blocks|key|1996214|text|ExtJS有一个可以做到这一点的ComboBox控件(还有一大堆很酷的东西！)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1996215|编辑:浏览所有控件等，此处：http://www.sencha.com/products/js/|1996216|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.sencha.com/deploy/dev/examples/form/combos.html|1|http://www.sencha.com/products/js/^0|0|5|0|0|E|Y|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p><a href="http://dev.sencha.com/deploy/dev/examples/form/combos.html" rel="nofollow">ExtJS</a> has a ComboBox control that can do this (and a whole host of other cool stuff!!)</p>

<p>EDIT: Browse all controls etc, here: <a href="http://www.sencha.com/products/js/" rel="nofollow">http://www.sencha.com/products/js/</a></p>


blocks|key|1996220|text|最简单的方法是使用jQuery：jQuery+UI+combobox/autocomplete|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1996221|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/autocomplete/#combobox^0|G|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>The easiest way to do this is to use jQuery : <a href="http://jqueryui.com/demos/autocomplete/#combobox" rel="noreferrer">jQuery UI combobox/autocomplete</a></p>


blocks|key|1996223|text|Telerik也有一个组合框控件。本质上，它是一个带有图像的文本框，当你点击它们时，它会显示一个带有预定义选项列表的面板。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1996224|http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx|offset|length|1996225|但这是AJAX，所以它在网站上的占用空间可能比您想要的要大(因为您说它是"HTML")。|1996226|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|26|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>Telerik also has a combo box control. Essentially, it's a textbox with images that when you click on them reveal a panel with a list of predefined options.</p>

<p><a href="http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx" rel="nofollow">http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx</a></p>

<p>But this is AJAX, so it may have a larger footprint than you want on your website (since you say it's "HTML").</p>


blocks|key|1996233|text|另一种常见的解决方案是添加“其他..”选项添加到下拉列表中，当选择该选项时，将显示否则隐藏的文本框。然后，在提交表单时，使用下拉框或文本框值分配隐藏字段值，并在服务器端代码中检查隐藏的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1996234|示例：http://jsfiddle.net/c258Q/|offset|length|1996235|HTML代码：|1996236|Please+select:+<form+onsubmit="FormSubmit(this);">
<input+type="hidden"+name="fruit"+/>
<select+name="fruit_ddl"+onchange="DropDownChanged(this);">
++++<option+value="apple">Apple</option>
++++<option+value="orange">Apricot+</option>
++++<option+value="melon">Peach</option>
++++<option+value="">Other..</option>
</select>+<input+type="text"+name="fruit_txt"+style="display:+none;"+/>
<button+type="submit">Submit</button>
</form>|code-block|syntax|javascript|1996237|JavaScript：|1996238|function+DropDownChanged(oDDL)+{
++++var+oTextbox+=+oDDL.form.elements["fruit_txt"];
++++if+(oTextbox)+{
++++++++oTextbox.style.display+=+(oDDL.value+==+"")+?+""+:+"none";
++++++++if+(oDDL.value+==+"")
++++++++++++oTextbox.focus();
++++}
}

function+FormSubmit(oForm)+{
++++var+oHidden+=+oForm.elements["fruit"];
++++var+oDDL+=+oForm.elements["fruit_ddl"];
++++var+oTextbox+=+oForm.elements["fruit_txt"];
++++if+(oHidden+&&+oDDL+&&+oTextbox)
++++++++oHidden.value+=+(oDDL.value+==+"")+?+oTextbox.value+:+oDDL.value;
}|1996239|在服务器端，从请求中读取“水果”的值。|1996240|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/c258Q/^0|0|3|Q|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Another common solution is adding "Other.." option to the drop down and when selected show text box that is otherwise hidden. Then when submitting the form, assign hidden field value with either the drop down or textbox value and in the server side code check the hidden value.</p>

<p>Example: <a href="http://jsfiddle.net/c258Q/" rel="nofollow">http://jsfiddle.net/c258Q/</a></p>

<p>HTML code:</p>

<pre><code>Please select: &lt;form onsubmit="FormSubmit(this);"&gt;
&lt;input type="hidden" name="fruit" /&gt;
&lt;select name="fruit_ddl" onchange="DropDownChanged(this);"&gt;
    &lt;option value="apple"&gt;Apple&lt;/option&gt;
    &lt;option value="orange"&gt;Apricot &lt;/option&gt;
    &lt;option value="melon"&gt;Peach&lt;/option&gt;
    &lt;option value=""&gt;Other..&lt;/option&gt;
&lt;/select&gt; &lt;input type="text" name="fruit_txt" style="display: none;" /&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>function DropDownChanged(oDDL) {
    var oTextbox = oDDL.form.elements["fruit_txt"];
    if (oTextbox) {
        oTextbox.style.display = (oDDL.value == "") ? "" : "none";
        if (oDDL.value == "")
            oTextbox.focus();
    }
}

function FormSubmit(oForm) {
    var oHidden = oForm.elements["fruit"];
    var oDDL = oForm.elements["fruit_ddl"];
    var oTextbox = oForm.elements["fruit_txt"];
    if (oHidden &amp;&amp; oDDL &amp;&amp; oTextbox)
        oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
}
</code></pre>

<p>And in the server side, read the value of "fruit" from the Request.</p>


blocks|key|1996242|text|我喜欢影子精灵的答案，它非常准确地回答了这个问题。这里是我使用的jQuery对此的改进。http://jsfiddle.net/UJAe4/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1996243|在输入新值之后，表单就可以发送了，只需要在后端处理新值。|1996244|jQuery是：|1996245|(function+($)+
{
+$.fn.otherize+=+function+(option_text,+texts_placeholder_text)+{
++++oSel+=+$(this);
++++option_id+=+oSel.attr('id')+%2B+'_other';
++++textbox_id+=+option_id+%2B+"_tb";

++++this.append("<option+value=''+id='"+%2B+option_id+%2B+"'+class='otherize'+>"+%2B+option_text+%2B+"</option>");
++++this.after("<input+type='text'+id='"+%2B+textbox_id+%2B+"'+style='display:+none;+border-bottom:+1px+solid+black'+placeholder='"+%2B+texts_placeholder_text+%2B+"'/>");
++++this.change(

++++function+()+{
++++++++oTbox+=+oSel.parent().children('#'+%2B+textbox_id);
++++++++oSel.children(':selected').hasClass('otherize')+?+oTbox.show()+:+oTbox.hide();
++++});

++++$("#"+%2B+textbox_id).change(

++++function+()+{
++++++++$("#"+%2B+option_id).val($("#"+%2B+textbox_id).val());
++++});
};
}(jQuery));|code-block|syntax|javascript|1996246|因此，您可以将其应用于以下html：|1996247|<form>
++++<select+id="otherize_me">
++++++++<option+value=1>option+1</option>
++++++++<option+value=2>option+2</option>
++++++++<option+value=3>option+3</option>
++++</select>
</form>|1996248|就像这样：|1996249|$(function+()+{

+++$("#otherize_me").otherize("other..",+"put+new+option+vallue+here");

});|1996250|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/UJAe4/^0|18|Q|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<p>I love the Shadow Wizard answer, which accually answers the question pretty nicelly. 
My jQuery twist on this which i use is here. <a href="http://jsfiddle.net/UJAe4/" rel="nofollow">http://jsfiddle.net/UJAe4/</a> </p>

<p>After typing new value, the form is ready to send, just need to handle new values on the back end.</p>

<p>jQuery is:</p>

<pre><code>(function ($) 
{
 $.fn.otherize = function (option_text, texts_placeholder_text) {
    oSel = $(this);
    option_id = oSel.attr('id') + '_other';
    textbox_id = option_id + "_tb";

    this.append("&lt;option value='' id='" + option_id + "' class='otherize' &gt;" + option_text + "&lt;/option&gt;");
    this.after("&lt;input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/&gt;");
    this.change(

    function () {
        oTbox = oSel.parent().children('#' + textbox_id);
        oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
    });

    $("#" + textbox_id).change(

    function () {
        $("#" + option_id).val($("#" + textbox_id).val());
    });
};
}(jQuery));
</code></pre>

<p>So you apply this to the below html:</p>

<pre><code>&lt;form&gt;
    &lt;select id="otherize_me"&gt;
        &lt;option value=1&gt;option 1&lt;/option&gt;
        &lt;option value=2&gt;option 2&lt;/option&gt;
        &lt;option value=3&gt;option 3&lt;/option&gt;
    &lt;/select&gt;
&lt;/form&gt;
</code></pre>

<p>Just like this:</p>

<pre><code>$(function () {

   $("#otherize_me").otherize("other..", "put new option vallue here");

});
</code></pre>


blocks|key|1996257|text|现在可以使用HTML5完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1996258|请在此处查看此帖子HTML+select+form+with+option+to+enter+custom+value|offset|length|1996259|<input+type="text"+list="cars"+/>
<datalist+id="cars">
++<option>Volvo</option>
++<option>Saab</option>
++<option>Mercedes</option>
++<option>Audi</option>
</datalist>|code-block|syntax|javascript|1996260|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5650457/html-select-form-with-option-to-enter-custom-value^0|0|9|1E|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>It can be done now with HTML5 </p>

<p>See this post here <a href="https://stackoverflow.com/questions/5650457/html-select-form-with-option-to-enter-custom-value">HTML select form with option to enter custom value</a></p>

<pre><code>&lt;input type="text" list="cars" /&gt;
&lt;datalist id="cars"&gt;
  &lt;option&gt;Volvo&lt;/option&gt;
  &lt;option&gt;Saab&lt;/option&gt;
  &lt;option&gt;Mercedes&lt;/option&gt;
  &lt;option&gt;Audi&lt;/option&gt;
&lt;/datalist&gt;
</code></pre>


<p>In a Windows Forms application, a drop-down selector list also gives the user the option of typing an alternate value into that same field (assuming the developer has left this option enabled on the control.)</p>

<p>How does one accomplish this in HTML? It appears as if it is only possible to select values from the list.</p>

<p>If it's not possible to do this with straight HTML, is there a way to do this with Javascript?</p>


Manually type in a value in a "Select" / Drop-down HTML list?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在Windows窗体应用程序中，下拉选择器列表还为用户提供了在同一字段中键入备用值的选项(假设开发人员已在控件上启用此选项)。在HTML中如何做到这一点呢？看起来好像只能从列表中选择值。如果用普通的HTML不能做到这一点，有没有办法用Javascript做到这一点呢？

问是否在“选择”/下拉HTML列表中手动键入一个值？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在“选择”/下拉HTML列表中手动键入一个值？EN