表单:如何在输入文本字段的末尾添加下拉选项
Forms: How to add dropdown choice at the end of an input text field?
我正在为子域制造商构建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 个输入不为空时,才会发布表单。
- 在Internet Explorer中,向所选内容添加选项不起作用
- 向html选择元素添加选项
- 使用docment.createElement向元素添加选项
- 在带有 bootbox 的自定义对话框中添加选项以选择表单控件.js在 ASP.NET MVC 中
- 具体化选择-不'动态添加选项时不起作用
- Chrome:在用户打开一个选择后添加选项
- 动态添加选项以选择多个JQuery插件
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 向选择框添加选项(如果尚未列出该选项)
- 添加选项以使用 javascript 从 json 文件中选择字段
- 在对象创建器中向 DOM 添加选项
- ExtJS 动态添加选项卡
- 在传单图层组中为空白图块图层添加选项
- 从数组或对象添加选项值和内部 HTML
- 在单击按钮时向高图表添加选项
- 如何添加选项来调整引导盒警报的大小
- jquery- 在<选择>中添加<选项>标签
- 基础6:如何使用jquery添加选项卡
- 添加选项卡窗格后引导选项卡下拉列表不起作用
- 如何向 JavaScript 创建的下拉菜单添加选项