下拉菜单/文本字段为一

Question

我正在建立新网站,我需要一个下拉菜单来选择我网站中的内容.但与此同时,我需要这个下拉列表来接受文本.因此,如果客户想要从下拉列表中选择,那么他也可以,如果客户想要通过文本输入金额,那么他也可以.正如你所看到的,我想让它成为双重的.

例如:假设有一个amount下拉菜单,其元素为(1,2,3);

现在假设客户端需要的金额为5 - 这是他的权利 - 它在下拉列表中不存在,因此客户现在必须以文本方式输入金额.因此,对于任何条目,客户必须从下拉列表中选择或以文本方式输入金额.

我的问题的描述,我向大家介绍过的简单例子后,这里是我的问题:

是否有HTML代码可以将下拉菜单和文本字段合二为一,而不是分开？

Answer 1

您可以使用HTML5本地执行此操作<datalist>:

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Answer 2

选项1

包括dhtmlgoodies中的脚本并初始化如下:

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 

createEditableSelect(document.forms[0].myText);

选项2

这是一个自定义解决方案,它结合了<select>元素和<input>元素,为它们设计样式,并通过JavaScript来回切换

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

Answer 3

您可以使用<datalist>标签来代替<select>标签。

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Answer 4

现代解决方案是“搜索”类型的输入字段！

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search https://www.w3schools.com/tags/tag_datalist.asp

在 HTML 中的某处定义一个数据列表以供以后参考：

<datalist id="mylist">
   <option value="Option 1">
   <option value="Option 2">
   <option value="Option 3">
</datalist>

然后你可以像这样定义你的搜索输入：

<input type="search" list="mylist">

瞧。非常好和容易。

Answer 5

我发现这个问题和讨论非常有帮助，并希望展示最终得到的解决方案。它基于@DevangRathod给出的答案，但是我使用jQuery并对其进行了一些调整，因此想显示一个完整注释的示例，以帮助其他人进行类似的工作。我最初使用的是HTML5数据列表元素，但对该解决方案不满意，因为它从下拉列表中删除了与框中输入的文本不匹配的选项。在我的应用程序中，我希望完整的列表始终可用。

此处具有完整功能的演示：https : //jsfiddle.net/abru77mm/

HTML：

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS：

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS：

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

欢迎对我的实施提出任何改进意见。希望有人觉得这有帮助。