How can I pass a value from input field to a select option using jquery?

Question

I'm using the following code to pass a value from a select option to a given input field.

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

But how can I pass the value of the input field back to the select option value using jQuery?

You only need to change the selectors around. The same logic will work - assuming the select has an option matching the value entered. — Rory McCrossan
– Rory McCrossan, Commented Oct 17, 2019 at 8:41
you want to add a option in select field as per your input text? — Amit
– Amit, Commented Oct 17, 2019 at 8:47
@Amit i want the default value of the select box be the value of the input field. — Designer
– Designer, Commented Oct 17, 2019 at 8:51
but your code is working well, what do you want? I am still confused sorry. If you write 'abc' in your input field, it should be appear in select field? — Amit
– Amit, Commented Oct 17, 2019 at 8:52

Amit · Accepted Answer · 2019-10-17 09:27:06Z

1

I am not sure what you are exactly looking, however, as per my understanding I have modifed your code samples.. You can check below snippet.

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

Please check and let me know if you have any further queries.

edited Oct 17, 2019 at 9:27

answered Oct 17, 2019 at 9:14

Amit

1,5601 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Designer Over a year ago

I want exactly what you did but vice versa. The select box must have the value of the input field not the opposite. Thank you

Amit Over a year ago

means if you type "New" then dropdown will be automatically selected "New" option, right?

Designer Over a year ago

No. When the page loads the input field has the value "new" as default. I want it so the select box has also the same value selected as default. So in summary there must be a way to tell the select box has the same value as the input field on page load. I dont touch at all the input field as in my form is hidden.

Amit Over a year ago

Please check now..is it okay?

Designer Over a year ago

Yeahhh! OK this is exactly what i wanted !!

|

Ivan · Accepted Answer · 2019-10-17 09:05:01Z

1

Try this

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

edited Oct 17, 2019 at 9:05

answered Oct 17, 2019 at 8:47

Ivan

462 bronze badges

Comments

vipul patel · Accepted Answer · 2019-10-17 09:34:45Z

1

Example for the same: Blur out your input and value option will be added to select dropdown

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

edited Oct 17, 2019 at 9:34

answered Oct 17, 2019 at 9:01

vipul patel

7504 silver badges10 bronze badges

6 Comments

Designer Over a year ago

It doesnt work. When you run the snippet the value of the select is "Choose Condition" instead of "New"

vipul patel Over a year ago

@Designer i thought you want it in option. I edited the code.

vipul patel Over a year ago

@Designer did you try now ??

Designer Over a year ago

Still doesnt work. When you run the script the value of the select box option is still "Choose condition" and not "new" as it should be.

vipul patel Over a year ago

Preloading itself you want it to be selected ?? can you edit input value At that time it takes new value

|

jishan siddique · Accepted Answer · 2019-10-17 09:51:55Z

0

Here you can find inline functionality

if you enter a value in textbox value append in drop-down
if you select drop-down value auto set in textbox.

Note: add value in textbox change just input focus

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

answered Oct 17, 2019 at 9:51

jishan siddique

1,8852 gold badges17 silver badges28 bronze badges

Collectives™ on Stack Overflow

How can I pass a value from input field to a select option using jquery?

4 Answers 4

6 Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related