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

Forms: How to add dropdown choice at the end of an input text field?

本文关键字：添加 选项 字段 文本 输入 表单      更新时间：2023-09-26

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

子域将由 {用户输入} 组成。{oneofmanypredefined.domain}

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

我现在通过使用输入文本字段 + 选择选项使其工作。这样，我需要将它们混合到下一页的一个隐藏字段中(表单操作="下一页.php"(

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

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

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

我

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

可能的解决方案#2：是否有一种好方法可以使用javascript将"动态"输入到文本字段中的值+在选择中选择的值组合在一起，因此我可以使用该组合值输入所有javascript。这样每次我在文本字段中编写或做出新的选择时，javascript 都会即时更新？

可能的解决方案 #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都包含整个子域。

使用 jQuery 和 (HTML5 必需属性(，您可以使用以下内容：

<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 个输入不为空时，才会发布表单。

相关文章：