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

changing value of unordered list when selecting li item

本文关键字：无序 列表 选择 li      更新时间：2023-09-26

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

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

这是我的小提琴。这是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函数上工作？

谢谢，Milos

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

实况演示

将此作为您的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);
    });
});

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

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

jsFiddle

相关文章：