отображение данных по клику внутри поля ввода

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>

Когда я нажимаю «закон» или «Джин», он отображается в поле ввода, но когда я нажимаю «Смит» или «Майк» вместо одного имени, оба этих имени появляются внутри поля ввода. Но я хочу только одно имя, на которое я нажал. Как это сделать?

- спасибо -

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);
});

Вы можете попробовать это здесь.