Question

我对HTML / javascript非常陌生。我正在尝试创建一个具有四个字段的表单：第一个字段（texta）是readonly，第二个字段（selectiona）是一个下拉列表，第三个字段（{{ 1}}）为textb，第四个字段（句子）是其他三个字段的串联。我无法弄清楚为什么我的JavaScript无法正常工作：

readonly

<script>
$('#texta, #selectiona, #textb, #selectionb').bind('keypress blur', function() { 
    $('#sentence').val($('#texta').val() + ' ' +
    $('#selectiona').val() + ' ' +
    $('#textb').val() + ' ' +
    $('#selectionb').val() );
});
<script>

Answer 1

如果在HTML标签属性周围添加引号，您的代码应该可以正常工作。

注释1：您的JS代码是有效的代码，但最好将bind替换为on，因为bind方法是专用的，因为jQuery版本3，请检查：

$('#texta, #selectiona, #textb, #selectionb').on('keypress blur', function() {

注意2：：如果将要附加事件的所有元素都赋予一个通用类，然后将该事件附加至该类，则代码将更加高效：

$('.common_class').on('change input', function() {

此外，您可以将input和input的{{1}}事件和textarea的{{1}}使用。

change

select

Answer 2

我首先看到的是HTML标记应位于配额内：例如id =“ texta”代替id = texta

Answer 3

您可以使用“ on change”：

$('#selectiona, #selectionb').on('change', function() { 
    $('#sentence').val($('#texta').val() + ' ' +
    $('#selectiona').val() + ' ' +
    $('#textb').val() + ' ' +
    $('#selectionb').val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text A:<input id=texta readonly value="My favorite car is a: "></p>
<p>Selection A: <select id=selectiona>
	<option>Select...</option>
	<option>Toyota</option>
	<option>Honda</option>
	</select></p>
<p>Text B: <input id=textb readonly value="because they are "></p>
<p>Selection B: <select id=selectionb>
	<option>Select...</option>
	<option>reliable.</option>
	<option>fun to drive.</option>
	</select></p>
<p>Sentence: <input id=sentence readonly></p>

使用JavaScript连接多个表格输入值

3 个答案: