javascript - 使用javascript连接多个表单输入值

Question

我对 HTML/javascript 很陌生。我正在尝试创建一个包含四个字段的表单:第一个字段 (texta) 是 readonly，第二个字段 (selectiona) 是一个下拉列表中，第三个字段 (textb) 是 readonly，第四个字段(句子)是其他三个字段的串联。我不明白为什么我的 javascript 不工作:

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

Answer 1

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

注意 1:您的 JS 代码是有效代码，但最好将 bind 替换为 on，因为 bind 方法自 jQuery 版本 3 以来一直是专用的，检查:

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

注意 2: 如果您将要附加事件的所有元素都提供给一个公共(public)类，然后将事件附加到此类，您的代码会更有效率:

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

您还可以为 input 和 textarea 使用 input 事件，为 使用 change >选择的。

$('#texta, #selectiona, #textb, #selectionb').bind('input 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" style="width:70%" readonly></p>