jquery - 在输入字段中显示点击的数据

Question

<script type="text/javascript">
$(document).ready(function () {

  $("#list > li").click(function(){
      var $val = $(this).text();
      $("#hi").attr('value',$val);
      });

});
</script>



<input type="text" id="hi" disabled="disabled" value=" " />
<ul id="list">
    <li>Mike
        <ul>
            <li>Smith</li>
        </ul>
    </li>
        <li>Gene</li>
            <li>Law</li>
</ul>

当我单击“law”或“Gene”时，它会显示在输入字段中，但是当我单击“Smith”或“Mike”而不是单个名称时，这两个名称都会显示在输入字段中。但我只想要我点击的单个名称。如何做到这一点？

--谢谢--

Answer 1

您可以将每个菜单项文本包含在一个范围内并检测对其的点击:

$(document).ready(function () {

  $("#list span").click(function(){
      var $val = $(this).text();
      $("#hi").attr('value',$val);
      });

});

<input type="text" id="hi" disabled="disabled" value=" " />
<ul id="list">
    <li><span>Mike</span>
        <ul>
            <li><span>Smith</span></li>
        </ul>
    </li>
        <li><span>Gene</span></li>
            <li><span>Law</span></li>
</ul>

它会选取两个名称，因为您选择了任何 <li> 内的所有文本。项目

查看此jsfiddle