Copy value from text field to select dropdown

Question

I want to copy value of input fields to my drop down using jQuery. I have four option fields here with respective ids, when user enters any text on following field my drop down get value from it in real time .

My code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>option a</label>
<input type="text" id="opa" size="30" class="text-input" />
<br>
<label>option b</label>
<input type="text" id="opb" size="30" class="text-input" />
<br>
<label>option c</label>
<input type="text" id="opc" size="30" class="text-input" />
<br>
<label>option d</label>
<input type="text" id="opd" size="30" class="text-input" />
<br>


<input type="text" id="a1" name="">

<select name="ra" class="form-control" id="ra">
  <option value="" >---Select right option ---</option>
  <option id="a" ></option>
  <option id="b" ></option>
  <option id="c" ></option>
  <option id="d"  ></option>
</select>

What have you tried so far using jQuery? Please post it's code as well. @HamzaMustafa — SE_User, Aug 07 '17 at 07:56
i dont have so many idea about jquerey , $("#ra").change(function(){ $("#opa").val($(this).val("#a1")); }); — Hamza Mustafa, Aug 07 '17 at 07:57
I would strongly suggest you to learn the basics of jQuery. Here are few resources for the same: [jQuery Tutorial](https://www.tutorialspoint.com/jquery/index.htm) — SE_User, Aug 07 '17 at 08:00

score 1 · Accepted Answer · answered Aug 07 '17 at 07:59

1

You can use this code below to achive what you want.

$("input[id^=op]").keyup(function() {
  var id = $(this).attr("id").replace("op","");
  $("#ra #" + id).val($(this).val()).text($(this).val());
})

Note I've didn't noticed that it was marked as duplicate before I pressed submit to the answer, but I'll leave it anyway

$("input[id^=op]").keyup(function() {
  var id = $(this).attr("id").replace("op","");
  $("#ra #" + id).val($(this).val()).text($(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>option a</label>
<input type="text" id="opa" size="30"  class="text-input" />
<br>
<label>option b</label>
<input type="text" id="opb" size="30"  class="text-input" />
<br>
<label>option c</label>
<input type="text" id="opc" size="30"  class="text-input" />
<br>
<label>option d</label>
<input type="text" id="opd" size="30"  class="text-input" />
<br>


<select name="ra" class="form-control" id="ra">
              <option value="" >---Select right option ---</option>
              <option id="a" ></option>
              <option id="b" ></option>
              <option id="c" ></option>
              <option id="d"  ></option>
             </select>

answered Aug 07 '17 at 07:59

Carsten Løvbo Andersen

26,637
10
47
77

above code is not working sir – Hamza Mustafa Aug 07 '17 at 08:03
What do you mean that its not working, check the example – Carsten Løvbo Andersen Aug 07 '17 at 08:05
perfect solution – Imran Ahmad Shahid Aug 07 '17 at 08:06
@ImranAhmadShahid Thanks – Carsten Løvbo Andersen Aug 07 '17 at 08:06
when i fill input fields , i got nothing under drop down sir – Hamza Mustafa Aug 07 '17 at 08:11
Have you made sure to take all my code, AND have you made sure you have included jquery in your project – Carsten Løvbo Andersen Aug 07 '17 at 08:17
@CarstenLøvboAndersen I'm not sure why experts like you and who has immense experience are promoting such questions in which the OP hasn't even done proper research in finding the solution. – SE_User Aug 07 '17 at 08:23
now its working thank u so much , am such an idiot – Hamza Mustafa Aug 07 '17 at 08:33
@HamzaMustafa love to know why you removed my answer as accepted – Carsten Løvbo Andersen Feb 01 '18 at 10:25
oh man take it easy ! it was by mistake <3 Peace – Hamza Mustafa Feb 02 '18 at 09:09

score 1 · Answer 2 · answered Aug 07 '17 at 08:03

1

I create the following fiddle to update option text and value on keyup event:

$('input').on('keyup', function() {
  var id = $(this).attr('id');
  $('#' + id[id.length - 1]).text(this.value);
  $('#' + id[id.length - 1]).val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>option a</label>
<input type="text" id="opa" size="30" class="text-input" />
<br>
<label>option b</label>
<input type="text" id="opb" size="30" class="text-input" />
<br>
<label>option c</label>
<input type="text" id="opc" size="30" class="text-input" />
<br>
<label>option d</label>
<input type="text" id="opd" size="30" class="text-input" />
<br>


<input type="text" id="a1" name="">

<select name="ra" class="form-control" id="ra">
  <option value="" >---Select right option ---</option>
  <option id="a" ></option>
  <option id="b" ></option>
  <option id="c" ></option>
  <option id="d"  ></option>
</select>

answered Aug 07 '17 at 08:03

Alex Char

32,879
9
49
70

its not working – Hamza Mustafa Aug 07 '17 at 08:20
@HamzaMustafa What exactly is not working ? There is an error in console? Can you please be more specific ? – Alex Char Aug 07 '17 at 08:23
when i fill four input fields , i want there values on drop down , thats what i want only – Hamza Mustafa Aug 07 '17 at 08:27
@HamzaMustafa This is what the code above does. – Alex Char Aug 07 '17 at 08:29
i seriosuly dont know why its not even working here , tho i include jquerey library properly – Hamza Mustafa Aug 07 '17 at 08:31
1

@AlexChar I'm not sure why experts like you and who has immense experience(both in the Industry and IN STACKOVERFLOW as well) are promoting such questions in which the OP hasn't even done proper research in finding the solution! – SE_User Aug 07 '17 at 08:56

Copy value from text field to select dropdown

2 Answers2