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

Answer 2

如果您的DOM结构不灵活，可以使用：

$("#list > li").click(function(e) {

    // get me the first childNode of the target of the click event
    var $val = e.target.childNodes[0].nodeValue;
    $("#hi").attr('value', $val);
});

You can try it here.

在输入字段中显示单击的数据

2 个答案: