javascript - jQuery 将选择字段和文本输入值实时合并到另一个文本字段

Question

我有一个三字段表单。我希望第三个字段(文本框)显示前两个字段的组合......一个是选择字段，另一个是文本字段；这些值用空格分隔。我尝试了以下方法但收效甚微。

<form>
    <select name="val1" id="val1">
        <option value="">Select a value</option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
    </select>
    <input name="val2" id="val2" />
    <input name="val3" id="val3" />
</form>
<script>
    $('#val1, #val2').keyup(function(){ $('#val3').val($('#val1').val()+' '+$('#val2').val()); });
<script>

我期望的是，当用户从选择字段中选择一个选项时，值将出现在第三个表单字段中，当用户在第二个字段中键入内容时，其值也会出现在第三个字段中(分隔)有一个空格。这一切都将实时发生。奇怪的是，jQuery 代码在所有浏览器中都不执行任何操作。

也许与 keyup() 函数有关，因为选择字段仅使用鼠标。但即使我忽略选择字段并在第二个字段中输入某些内容，它也应该单独出现在第三个字段中，但事实并非如此。

Answer 1

您的 #val1 是一个 select 元素，无法用它调用 keyup 事件。

相反，您需要使用change事件。

$('#val1').change(function () {
    changeThird();
});

$('#val2').keyup(function () {
    changeThird();
});

function changeThird() {
    $('#val3').val($('#val1').val() + ' ' + $('#val2').val());
}

JsFiddle:http://jsfiddle.net/ghorg12110/e7ru9jao/

对于asp:TextBox，如果想获取生成的数据，需要使用.attr():

$('#val1').change(function () {
    changeThird();
});

$('#val2').keyup(function () {
    changeThird();
});

function changeThird() {
    $('#val3').attr("value", $('#val1').val() + ' ' + $('#val2').val());
}