我对 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>
最佳答案
如果您在 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>
关于javascript - 使用javascript连接多个表单输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51383114/