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());
}

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

1 个答案: