Question

我想尝试在我的UL LI列表中添加功能，这样当点击LI项时，div的文本将更改为LI点击的选定值，但是，似乎没有任何内容发生。

以下是有问题的标记和代码：

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.11.3.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select {
    background:url(arrow.png) no-repeat scroll right top;
    border:1px solid rgb(170,170,170);
    width:180px;
    padding: 3px;
}
.select:hover {
    cursor: pointer;
}
.select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.select ul li {
    display: none;
    padding: 1px;
}

</style>

<script type="text/javascript">

window.onload = function() {

    $(".select").click(function () {
        $(this).find('ul li').toggle();
    });

    $(".select ul li").click(function(e) {

        $(this).find('.select').val($(this).html())

    });

}
</script>

</head>

<body>
<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
    <ul>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
    <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>

</body>

</html>

Answer 1

由于目标div位于被点击的li的父级别，因此您可以使用.closest()来定位所需的div元素。

$(".select").click(function () {
        $(this).find('ul li').toggle();
    });

    $(".select ul li").click(function(e) {
           $(this).closest('div.select').text($(this).html());
    });

示例：http://jsfiddle.net/DinoMyte/bvtngh57/150/

Answer 2

试试这个

$(".select ul li").on("click", function() {
  $(this).closest("div").contents().first().replaceWith($(this).text());
})

的 DEMO

Answer 3

 $(".select ul li").click(function(e) {

    $(this).parents('.select').html($(this).html())

});

请尝试此而不是

$(".select ul li").click(function(e) {

    $(this).find('.select').val($(this).html())

});

这可能对您有所帮助

Answer 4

使用 closest() 功能获取父.select，然后使用 filter() 功能和条件this.nodeType == 3在div中只选择文本。使用以下内容将其替换为值。

$(".select").click(function() {
  $(this).find('ul li').toggle();
});

$(".select ul li").click(function(e) {
  $(this).closest('.select').contents().filter(function(){
    return this.nodeType == 3;
  })[0].textContent = $(this).html()
});

* {
  font-family: Segoe UI;
  font-size: 9pt;
}
.select {
  background: url(arrow.png) no-repeat scroll right top;
  border: 1px solid rgb(170, 170, 170);
  width: 180px;
  padding: 3px;
}
.select:hover {
  cursor: pointer;
}
.select ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.select ul li {
  display: none;
  padding: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
  <ul>
    <li>1234</li>
    <li>5678</li>
    <li>0123</li>
  </ul>
</div>
<br>
<br>
<div class="select" id="letters">Select Box2
  <ul>
    <li>abcd</li>
    <li>efgh</li>
    <li>ijkl</li>
  </ul>
</div>
<br>
<br>
<div class="select" id="fruits">Select Box3
  <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>oranges</li>
  </ul>
</div>

Answer 5

更改

$(this).find('.select').val($(this).html());
到
$(this).parent().parent().html($(this).html());

window.onload = function() {

    $(".select").click(function () {
        $(this).find('ul li').toggle();
       
    });

    $(".select ul li").click(function(e) {
        // Remove this code
        //$(this).find('.select').val($(this).html());
        // Add this line
        $(this).parent().parent().html($(this).html());
         
    });

}

* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select {
    background:url(arrow.png) no-repeat scroll right top;
    border:1px solid rgb(170,170,170);
    width:180px;
    padding: 3px;
}
.select:hover {
    cursor: pointer;
}
.select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.select ul li {
    display: none;
    padding: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
    <ul>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
    <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>

Answer 6

您应该使用额外的课程hide，这样您就可以控制hide/show的流程，并尝试为您的默认文字提供一个类，例如default，这样您就可以定位并更新它用以下代码触摸选择的html：

$(this).parents('.select').find('.default').text( $(this).text() );

希望这有帮助。

段

$(function(){
  $("body").on('click', '.select',function (e) {
    $(this).find('ul li').toggleClass('hide');
  });

  $("body").on('click', '.select ul li', function(e) {
    $(this).parents('.select').find('.default').text( $(this).text() );
  });
})

* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select {
    background:url(arrow.png) no-repeat scroll right top;
    border:1px solid rgb(170,170,170);
    width:180px;
    padding: 3px;
}
.select:hover {
    cursor: pointer;
}
.select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.select ul li {
    padding: 1px;
}

.select ul li.hide{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">
    <span class='default'>Select Box1</span>
    <ul>
        <li class="hide">1234</li>
        <li class="hide">5678</li>
        <li class="hide">0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">
    <span class='default'>Select Box2</span>
    <ul>
        <li class="hide">abcd</li>
        <li class="hide">efgh</li>
        <li class="hide">ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">
    <span class='default'>Select Box3</span>
    <ul>
        <li class="hide">apples</li>
        <li class="hide">bananas</li>
        <li class="hide">oranges</li>
    </ul>
</div>

单击UL LI时无法更改DIV文本

6 个答案:

段