javascript - 从 Input 复制值并选择到 div

Question

我有一个带有input[text]、select和textarea的表单，如何在 div 或 span 中克隆或复制input(type=text)、select、textarea的数据/值，换句话说，在 HTML 中。

它必须在不刷新或重新加载页面的情况下发生。换句话说，如果我输入一些内容： <input type="text" name="f_name" value="Small john" />

我想在一个

<span id="first_name">{here is the value of the field name}</span>

或者，如果我从选择列表中选择一个选项，并且该选项的值 id 为“499”且其内容为“USA”，那么我希望 USA 在跨度中显示，例如 id="Country_name"。

我想这一切都是用jquery/JS完成的。所以我做了这个FIDDLE，给那些想尝试的人！

Answer 1

尝试这个

$("input[name=f_name]").on('keyup', function () {
    $('#first_name').html($(this).val());
});
$("select[name=country]").on('change', function () {
    $('#Country_name').html($(this).find('option:selected').text());
});

利用

• $(this).find('option:selected').text()如果你想选择文本
• $(this).find('option:selected').val()如果要选择值

更新的演示

Answer 2

塞尔吉奥走在了正确的轨道上。不幸的是，他没有完全测试他的解决方案。这个有效...

http://jsfiddle.net/WLZyn/2

$('button').click(function(){
    $('#first_name').html($('input[name=f_name]').val());
    $('#Country_name').html($('select[name=country] option:selected').text());
});

所以，事实上（出于一些真正奇怪的原因），这...

$('select[name=country] option:selected').text()
获取所选选项的文本

$('select[name=country]').val()
获取所选选项的值

Answer 3

尝试这个：

$('button').click(function(){
    $('#first_name').html($('input[name=f_name]').val());
    $('#Country_name').html($('select[name=country] option:selected').text());
});

演示在这里

这$('input[name=f_name]').val()将获取输入的值。
这.text()将获取所选选项的文本。
这.val()将获取所选选项的值。