Как заполнить ввод текста с помощью JQuery с содержанием меню

Question

У меня есть код, используя загрузчик, с раскрывающимся меню:

<div class="col-lg-4"> 
    <div class="input-group"> 
    <div class="input-group-btn"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Núm.exercicis difícils <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#" class="numEx">1</a></li> 
      <li><a href="#" class="numEx">2</a></li> 
      <li><a href="#" class="numEx">3</a></li> 
      <li><a href="#" class="numEx">4</a></li> 
     </ul> 
     </div><!-- /btn-group --> 
    <input type="text" class="form-control" text ="hola" placeholder="100 o menys" aria-label="..."> 
    </div><!-- /input-group --> 
</div> 

Я хотел бы написать число щелкнуло в раскрывающемся вниз во входном тексте. Я хотел бы сделать это, используя $this, поэтому я делаю его динамически, и у меня есть более одного <ul> в раскрывающемся меню.

Я думаю, что это легко, но я пробовал разные способы и не нашел правильного пути.

Answer 1

В случае щелчка .numEx, вы можете найти ближайший .input-group, а затем найти input.form-control. После этого установите текст щелчка .numEx как значение input.form-control.

$('.numEx').click(function() { 
 
    var input = $(this).closest('.input-group').find('input.form-control'); 
 
    input.val($(this).text()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4"> 
 
    <div class="input-group"> 
 
     <div class="input-group-btn"> 
 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Núm.exercicis difícils <span class="caret"></span></button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#" class="numEx">1</a></li> 
 
       <li><a href="#" class="numEx">2</a></li> 
 
       <li><a href="#" class="numEx">3</a></li> 
 
       <li><a href="#" class="numEx">4</a></li> 
 
      </ul> 
 
     </div><!-- /btn-group --> 
 
     <input type="text" class="form-control" text="hola" placeholder="100 o menys" aria-label="..."> 
 
    </div><!-- /input-group --> 
 
</div>