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

Question

Я использую следующий код для передачи значения из опции select в данное поле input.

$(".itemconditionmenu").change(function() {
  var conditionofitem = $(this).val();
  $("#meta_itemcondition").val(conditionofitem);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
  <option value="">Choose Condition</option>
  <option value="New">New</option>
  <option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">

Но как я могу передать значение поля input обратно в значение опции select, используя jQuery?

Answer 1

Пример для того же: размытие вашего ввода и добавление опции значения, чтобы выбрать выпадающий список

$(".itemconditionmenu").change(function() {
  var conditionofitem = $(this).val();
  $("#meta_itemcondition").val(conditionofitem);
});

$("#meta_itemcondition").blur(function() {

  var inputValue = $(this).val();
  var o = new Option(inputValue, inputValue);
  $(o).html(inputValue);
  $("#itemcondition").append(o);
  $("#itemcondition").val(inputValue);
});

$( document ).ready(function() {
  var value =  $("#meta_itemcondition").val();
  console.log(value)
  var alreadyOption = false;
  $("#itemcondition option").each(function()
    {
      alreadyOption = $(this).val() === value;
      if(alreadyOption) {
        $("#itemcondition").val(value);
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<select id="itemcondition" class="itemconditionmenu">
  <option value="">Choose Condition</option>
  <option value="New">New</option>
  <option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New"/>

Answer 2

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

$( document ).ready(function() {
    var conditionofitem = $("#meta_itemcondition").val();
    $(".itemconditionmenu").val(conditionofitem);
});

$(".itemconditionmenu").change(function() {
  var conditionofitem = $(this).val();
  if(conditionofitem == '') {
  	  $("#meta_itemcondition").val('Choose Condition');
   } else {
   	  $("#meta_itemcondition").val(conditionofitem);
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
  <option value="">Choose Condition</option>
  <option value="New">New</option>
  <option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">

Пожалуйста, проверьте и дайте мне знать, если у вас есть какие-либо дополнительные вопросы.

Answer 3

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

$("#addOption").click(function(){
  $("#itemconditionmenu").append('<option value="'+$("#meta_itemcondition").val()+'" selected="selected">'+$("#meta_itemcondition").val()+'</option>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="itemconditionmenu">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<input id="meta_itemcondition" type="text" value=""></input>
<button id="addOption">ADD</button> 

Answer 4

Здесь вы можете найти встроенные функции

1. , если вы вводите значение в текстовое поле, добавляются в раскрывающемся списке
2. , если вы выбираете раскрывающееся значение. автоматически устанавливается в текстовом поле.

Примечание: добавить значение в текстовое поле, изменить только ввод фокуса

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="jsSelect" onchange="$('.jsTextBox').val($(this).val())"> 
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<input class="jsTextBox" onchange="if($(this).val()!=''){$('.jsSelect').append($('<option></option>').attr('value',$(this).val()).text($(this).val()));$('.jsSelect').val($(this).val());}" type="text" value="">