表单：如何在输入文本字段的末尾添加下拉选项？答案

【问题标题】：Forms: How to add dropdown choice at the end of an input text field?表单：如何在输入文本字段的末尾添加下拉选项？
【发布时间】：2014-12-10 14:19:32
【问题描述】：

我正在为子域制造商构建 HTML 表单。我不擅长使用 javascript，所以我的问题可能很愚蠢。但我在这里问，因为这是给我最好答案的地方:-)

子域将包含 {users-input}.{oneofmanypredefined.domains}

用户将能够创建一个子域，他们可以 1) 在文本字段中输入任何值 (a-z,0-9,-)，和 2）然后选择他们想要添加子域的预定义主域。

我现在通过使用输入文本字段 + 选择选项使其工作。这样我需要将它们混合到下一页上的一个隐藏字段中（form action="nextpage.php"）

可能的解决方案 1： 有没有一种方法可以让一个文本字段有一个类似于普通文本字段的部分，然后是一个下拉列表，但具有相同的 id 和名称？

我尝试发布图片，但需要更多声誉：http://bildr.no/image/cSsyNWdQ.jpeg

我在这里用谷歌搜索和搜索过，但没有找到任何解决方案。可能是因为没有，但至少我可以问:-)

我问的原因是它是否存在，那么它将帮助我节省重做所有 javascript 和所有其他构建在这个输入字段上的代码的时间。

可能的解决方案 #2： 有没有一种好方法可以使用 javascript 来“即时”组合输入到文本字段中的值 + 在选择中选择的值，所以我可以使用输入所有 javascript 的组合值。这样每次我在文本字段中写入或做出新的选择时，javascript 都会即时更新？

【问题讨论】：

您甚至不需要隐藏输入字段。在服务器端，您可以简单地组合这两个值。
#1：没有什么是开箱即用的。为此，您必须编写一些 javascript 来在用户输入子域（任何内容和点）时提示域。 #2：可以使用表单的提交事件来连接两个值并将其插入隐藏字段。
谢谢@ChrisBenseler。但是，我需要在点击任何按钮之前获取组合值。现在我已经将值发布到下一页，在下一页我将这些值合并为一个。但这使得第一页上的验证器只验证一个值。我需要验证两者合并为一个。

标签： javascript forms select input

【解决方案1】：

可能的解决方案#2 可能是现实的。这是一个初始化状态：

var combined_value = '';
var input_field = $('#subdomain'); // <input type="text" id="subdomain" ... >
var select_field = $('#domain_list'); // <select id="domain_list" ... >

那么可以定义两个onchange事件：

input_field.change(update_combined_value);
select_field.change(update_combined_value);

function update_combined_value() {
    combined_value = input_field.val() + select_field.val();
}

因此，每次更改后，变量 combined_value 都包含整个子域。

【讨论】：

谢谢。我一回到我的主计算机就会对此进行测试:-)
我现在有时间了。做了这个小提琴。这有效:-) jsfiddle.net/13asc1dt/4
我可以在获得足够的声望后立即为您投票。我需要 15 人才能投票。

【解决方案2】：

使用 jQuery 和 (HTML5 required 属性)，你可以使用这个：

<form action="anything.html" target="_blank">
    <input type="text" id="field1" name="par1" required  />
    <input type="text" id="field2" name="par2" required />

    <input type="text" id="willbehidden" name="concatpars" />

    <button>send</button>
</form>

$("form").on("submit", function() {
    $("#willbehidden").val( $("#field1").val() + $("#field2").val() )
});

这里是JSFIDDLE：http://jsfiddle.net/chrisbenseler/6xw3f8mq/

仅当前 2 个输入不为空时才发布表单。

【讨论】：