在输入字段中显示点击的数据答案

【问题标题】：displaying clicked data inside Input field在输入字段中显示点击的数据
【发布时间】：2011-10-28 10:53:52
【问题描述】：

<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>

当我点击“法律”或“基因”时，它会显示在输入字段中，但是当我点击“史密斯”或“迈克”而不是单个名称时，这两个名称都会出现在输入字段中。但我只想要一个我点击的名字。该怎么做？

--谢谢--

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案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

【讨论】：

@Coulton..那么，如何只选择二级文本？任何想法？谢谢
最简单的方法是在二级列表元素中添加一个单独的class。
@Coulton.. 我的意思是，如果我需要没有的解决方案 ??

【解决方案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.

【讨论】：