blocks|key|850979|text|现在可以使用HTML5完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|850980|请在此处查看此帖子HTML+select+form+with+option+to+enter+custom+value|offset|length|850981|<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|850982|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>


blocks|key|850753|text|最简单的方法是使用jQuery：jQuery+UI+combobox/autocomplete|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|850754|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|1065144|text|ExtJS有一个可以做到这一点的ComboBox控件(还有一大堆很酷的东西！)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1065145|编辑:浏览所有控件等，此处：http://www.sencha.com/products/js/|1065146|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|850855|text|另一种常见的解决方案是添加“其他..”选项添加到下拉列表中，当选择该选项时，将显示否则隐藏的文本框。然后，在提交表单时，使用下拉框或文本框值分配隐藏字段值，并在服务器端代码中检查隐藏的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|850856|示例：http://jsfiddle.net/c258Q/|offset|length|850857|HTML代码：|850858|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|850859|JavaScript：|850860|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;
}|850861|在服务器端，从请求中读取“水果”的值。|850862|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|850928|text|我喜欢影子精灵的答案，它非常准确地回答了这个问题。这里是我使用的jQuery对此的改进。http://jsfiddle.net/UJAe4/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|850929|在输入新值之后，表单就可以发送了，只需要在后端处理新值。|850930|jQuery是：|850931|(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|850932|因此，您可以将其应用于以下html：|850933|<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>|850934|就像这样：|850935|$(function+()+{

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

});|850936|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|1065235|text|Telerik也有一个组合框控件。本质上，它是一个带有图像的文本框，当你点击它们时，它会显示一个带有预定义选项列表的面板。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1065236|http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx|offset|length|1065237|但这是AJAX，所以它在网站上的占用空间可能比您想要的要大(因为您说它是"HTML")。|1065238|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>


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

服务器

Windows

jQuery

HTML5

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

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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