javascript - 在键入值或选择更改时连接值

Question

我在表单上有一个 SELECT 元素和一个 INPUT 元素，当这两个元素中的任何一个元素更新时，我需要始终获取连接值(SELECT + INPUT 的结果)，这包括:

• SELECT 更改所选值
• 用户开始在 INPUT 元素中输入

但我不知道如何实现这一目标。请参阅下面的示例:

<select id="rif" name="rif" class="form-control">
    <option value="J">J</option>
    <option value="G">G</option>
    <option value="V">V</option>
    <option value="E">E</option>
</select>

<input type="text" required="required" value="" name="_username" class="form-control numeric" id="username">

输入值可以是:

select#rif = "J"
input#username ="string"
output = "Jstring"


select#rif = "V"
input#username ="str"
output = "Vstr"

但随后我保留 input#username 不变，但更改 select#rif 如下:

select#rif = "J"
input#username ="str"
output = "Jstr"


select#rif = "V"
input#username ="str"
output = "Vstr"

换句话说，连接需要是双向的，并且当选择更改其选定值或输入通过 keyup 或任何其他事件更改其中的文本时，输出值应始终更改。谁能给我一些帮助吗？

Answer 1

这应该有效:

$(function(){
    function result(){
        var s = $('#rif').find(":selected").val(), i = $('#username').val();

        return s + i;
    }   

    $('#rif').on('change', result);
    $('#username').on('keyup', result);
});

首先声明一个函数，该函数读取下拉列表和输入字段的值并返回这些值的串联。最后使用选择菜单的更改事件和输入的键盘来捕获它们的编辑并将它们的结果作为回调返回。