jquery - 通过单击下拉列表更改文本值 - JQuery

Question

http://jsfiddle.net/ZbcVH/1/

HTML

<div id="locationselect"><ul><li>United Kingdom</li><li>France</li><li>Germany</li></ul></div>
<input tpye="text" id="location" />

jQuery

$('#locationselect').click(function() {
    $('#location').html($(this).val());
});

如上面的链接所示，我基本上想从无序列表项id="locationselect"中选择值，然后将所选列表项的值放入id="location"文本框中。我不太确定我哪里出错了。

我确定这很简单。我尝试查看其他问题以提供帮助，但似乎没有点击。

谢谢你的帮助！

Answer 1

您需要.text而不是 .val 来检索值，.val而不是 .html 来设置值，并且您需要绑定到li而不是 parent div：

$('#locationselect li').click(function() {
    $('#location').val($(this).text());
});

Answer 2

试试这个代码。在输入中，使用val()更改值。上你text()的礼。

jsFiddle here

$('document').ready(function(){
    $('#locationselect li').click(function() {
        $('#location').val($(this).text());
    });
});

或与.on

$('document').ready(function(){
    $('#locationselect li').on('click',function() {
        $('#location').val($(this).text());
    });
});

Answer 3

将侦听器放在li元素本身上，然后text从中获取。

试试这个解决方案：

<div id="locationselect"><ul><li>United Kingdom</li><li>France</li><li>Germany</li></ul></div>
<input tpye="text" id="location" />

$('#locationselect li').click(function() {
    $('#location').val($(this).text());
});

查看更新的 JSFiddle：http: //jsfiddle.net/WYUSn/

Answer 4

正如您从http://jsfiddle.net/ZbcVH/8/看到的，有两个我的错误：

你需要使用li代替，#locationselect你应该使用.text()代替.val()。