How to fill a text input using jquery with the content of a menu

Question

I have code using bootstrap, with a drop-down menu:

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

I'd like to write the number clicked in the drop-down menu in the input text. I'd like to do it using $this, so I'm making it dynamically and I have more than one <ul> in the drop-down menu.

I think it is easy but I've tried some different ways and didn't find the correct way.

Answer 1

In click event of .numEx get the closest .input-group and then find input.form-control in it. After that set the text of clicked .numEx as the value of 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>