Question

我有一个文本输入，可以使用keyup自动更改div中的文本。问题是，用户还需要能够从下拉列表中选择一个选项并进行更新。

示例：http://jsfiddle.net/jcdevelopment/w3tu5/18/

我使用以下内容更新div没有问题，但是当选择下拉列表时，没有任何更改。有什么建议吗？

$('#name').keyup(function () {
            $('._name').text($('#name').val());
        });

Answer 1

这是您正在寻找的fiddle

 $('.drop').change(function () {
            $('._name').text($('.drop').val());
            $('#name').val($('.drop').val());
        });

Answer 2

<强> Demo

检查此代码，您还需要更改._name的文字，

对于输入文字，

$('#name').keyup(function () {
    $('._name').text($(this).val());
});

适用于<select>

$('.drop').change(function () {
     $('._name').text($(this).val());
     $('#name').val($(this).val());
});

旁注：使用$(this)获取当前元素的上下文，而不是重复使用选择器。

Answer 3

有几种方法可以解决这个问题。这是一个：

$('#name').keyup(function () {            
    $('._name').text($('#name').val());
    $('.drop option[value="' + $(this).val() + '"]').prop("selected", true);
});

<强> DEMO

Answer 4

更改输入值会触发keyup事件。

你只需要自己开火：

$('.drop').change(function () {
    $('#name').val($('.drop').val());
    $('#name').keyup();
});

或创建一个更新标签内容的函数：

function updateLabel(){
    $('._name').text($('#name').val());
}

并从keyup事件处理程序和下拉更改事件处理程序中调用它：

$('#name').keyup(function () {
    updateLabel();
});

$('.drop').change(function () {
    $('#name').val($('.drop').val());
    updateLabel();
});

从下拉列表更改文本输入不会更新选定的div

4 个答案: