Question

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

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

这是我的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;
});

Live DEMO

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);
    });
});

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

3 个答案: