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>

When ever i click on “law” or “Gene” it get displayed on input field, but when I click on “Smith” or “Mike” instead of single name, both of these names appear inside input field. But I want just single name on which I clicked. How to do that?

–thanks–

Answer 1

If your DOM structure is inflexible, you can use this:

$("#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.