如何使用 jquery 将输入字段中的值传递给 select 选项？

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

但是如何使用 jQuery 将input字段的值传递回select选项值？

Answer 1

尝试这个

 $("#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 2

相同的示例：模糊您的输入和值选项将添加到 select 下拉列表中

 $(".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 3

我不确定您到底在看什么，但是，根据我的理解，我已经修改了您的代码示例。您可以查看下面的代码段。

 $( 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 4

在这里您可以找到内联功能

1. 如果您在下拉列表中的文本框中输入值 append
2. 如果您在文本框中自动设置 select 下拉值。

注意：在文本框中添加值更改只需输入焦点

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