在一个下拉菜单/文本字段 [英] Drop Down Menu/Text Field in one

问题描述

我正在构建新网站，我需要一个下拉菜单来选择我的网站中的某些内容。但同时我需要这个下拉列表来接受文本。所以如果客户想从下拉列表中选择，那么他也可以，如果客户想要通过文本输入金额，那么他也可以。正如你所看到的，我想把它变成双重的。

例如：假设有一个金额下拉菜单，它的元素是（1,2,3）;

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

在描述我的问题后，我介绍了一个简单示例给你，这里是我的问题：

是否有HTML代码将下拉菜单和文本字段合并为一个，作为双重字符，而不是分隔的？

解决方案

选项1

包含 dhtmlgoodies 并初始化如下：

 < input type =textname =myTextvalue =Norway
 selectBoxOptions =Canada; Denmark; Finland; Germany; Mexico> 
  

createEditableSelect（document.forms [0] .myText）;


选项2

以下是自定义解决方案它结合了< select> 元素和< input> 元素，对它们进行了样式设置，并通过来回切换JavaScript

 < div style =position：relative; width：200px; height：25px;边界：0;填充：0;余量：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 =textname =displayValueid =displayValue
 placeholder =add / select a valueonfocus =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 =idValueid =idValuetype =hidden> 
< / div> 
  

I'm working on building new site, and I need a drop down menu to select the amount of something in my site. But at the same time I need this drop down list to accept text. So if the client wants to choose from the drop down list then he can, also if the client want to enter the amount by text then he can also. As you can see I want to make it dual.

For example: suppose there is an amount drop down menu, and its elements are (1,2,3);

Suppose now that the client needs the amount to be 5 - this is his right - it does not exist in the drop down list, so the client now must enter the amount textually. So for any entry the client must either choose from the drop down list or enter the amount textually.

After the description of my problem, and the simple example that I have introduced to you, here is my question:

Is there HTML code to make a drop down menu and a text field in one, as dual, not separated?

解决方案

Option 1

Include the script from dhtmlgoodies and initialize like this:

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

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

Option 2

Here's a custom solution which combines a <select> element and <input> element, styles them, and toggles back and forth via 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>

这篇关于在一个下拉菜单/文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！