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

Question

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

<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone" 
data-toggle="dropdown">

<div class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>

Это мой код jquery:

$('.dropdown-item').click(function (){
  $('#area-inout').val() = $('.dropdown-item').text();
})

Кто-нибудь может мне помочь?

Answer 1

попробуй:

$('.dropdown-menu .dropdown-item').on('click', function(){
   
    $("#area-zone").val($(this).text())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 

  
          <div class="dropdown">
           <input class="dropdown-toggle" type="text" name="area-zone" id="area-zone" 
            data-toggle="dropdown">
            <ul class="dropdown-menu">
                   <li><a class="dropdown-item" href="#">Jway</a></li>
                  <li><a class="dropdown-item" href="#">Atrod</a></li>

            </ul>
          </div>
 

Answer 2

Попробуйте!

$("div#dropDownSelect").click(function(e){
document.getElementById('inputBox').value = e.target.innerHTML;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputBox" value="" class="dropdown-toggle" type="text" name="area-zone" id="area-zone" 
data-toggle="dropdown">

<div id="dropDownSelect" class="dropdown-menu" role="menu" aria-labelledby="area-zone">
  <a class="dropdown-item d-area-input" href="#">Jway</a>
  <a class="dropdown-item" href="#">Atrod</a>
</div>

Answer 3

Пожалуйста, измените dorpdown_name на ваше имя в поле выбора

<script>
    $('select[name="dorpdown_name"]').change(function() {
        $('#area-zone').val($(this).val());
    })
</script>

Answer 4

Попробуйте это

$('.dropdown-menu .dropdown-item').on('click', function(){
   
    $("#area-zone").val($(this).text())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone" 
data-toggle="dropdown">

<div class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item d-area-input" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>