javascript - 选择 li 项时更改无序列表的值

Question

我的问题是，在选择/选择一个 li 项目后，如何更改 UL 列表中原始元素的值。

示例：我想选择 City3，当我这样做时，它应该是“city3”的值，而不是“Pick City”。

这是我的jsfiddle。这是 HTML：

<div class="menu1">
<li class="naslov"><b>Pick City</b></li>
<div class="submenu1">
    <ul id="sel">
        <li value="1"><a href="#"><b>City1</b></a></li>
        <li value="2"><a href="#"><b>City2</b></a></li>
        <li value="3"><a href="#"><b>City3</b></a></li>
        <li value="4"><a href="#"><b>City4</b></a></li>
        <li value="5"><a href="#"><b>City5</b></a></li>
    </ul>
</div>

是否可以不更改任何 css/html（我的意思是，我不想添加 select、option 元素），并使其仅在某些 JQuery/JS 函数上工作？

谢谢，米洛斯

Answer 1

$('#sel a').click(function(){
    $('li.naslov b').html(this.innerHTML);

    return false;
});

现场演示

Answer 2

另一种可能的方法来做到这一点。在这种情况下，li 可以是动态的，基于 AJAX 提要或其他一些 JavaScript。

    $('#sel').on('click','li',function() {
       $('li.naslov b').text($(this).text());
    });

jsFiddle

Answer 3

试试这个作为你的 JS ......

$(document).ready(function(){
    $('.menu1').hover(function(){
        $('.submenu1').stop(true).slideToggle('slow');
    });
    var orig = $(".naslov").html();
    $("#sel li").hover(function(){
        $(".naslov").html($(this).text());
    }, function(){
        $(".naslov").html(orig);
    });
});