Adding option from input dynamically

Question

I'm trying to add <input name="input"> values to <select> <options> each time when I change the value with onblur function.

In this case it does change the value of <input name="output"> but I would like to add them multiple, so that's why I'm looking for adding values in to select options.

Is this possible?

Thanks.

function add(form) {
		form.output.value = form.input.value;
	}

<form>
  <input name="input" type="text" value="" onblur="add(this.form);">
  <input tabindex="-1" name="output" type="text" value="">
  <select multiple>
    <option>Test</option>
  </select>
</form>

Farhad · Accepted Answer · 2016-10-15 06:36:12Z

2

if you mean that after changing input value , add it's value as option to select , yea it's possible I've wrote the code see the demo at below link

https://jsfiddle.net/oxxqw71s/

and code :

$("select").append($('<option>', {value:v, text:v}));

answered Oct 15, 2016 at 6:36

Farhad

2,0231 gold badge18 silver badges29 bronze badges

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

2 Comments

Efe Albayrak Over a year ago

Thank you so much. Yes this is what I was looking for. Is there any chance to make it reverse, I mean if I want to take the value out from select if I add mistakenly just in case.

Farhad Over a year ago

Yes can get when select value changes just add this attr onchange="selectchanged(this.value)" to select then in javascript declare function with name selectchanged like below function selectchanged(v) { //v is the value of select }

Fatih · Accepted Answer · 2016-10-15 06:43:45Z

You can implement like below.

function add(val){
  var data = val.input.value;
  val.output.value = data;
  
  var option = document.createElement("option");
  option.text = data;
  val.opt.add(option, val.opt[0]);
  
}

<form>
  <input name="input" type="text" value="" onblur="add(this.form);">
  <input tabindex="-1" name="output" type="text" value="">
  <select multiple name="opt">
    <option>Test</option>
  </select>
</form>

HTML

<form>
  <input name="input" type="text" value="" onblur="add(this.form);">
  <input tabindex="-1" name="output" type="text" value="">
  <select multiple name="opt">
    <option>Test</option>
  </select>
</form>

JS

function add(val){
  var data = val.input.value;
  val.output.value = data;

  var option = document.createElement("option");
  option.text = data;
  val.opt.add(option, val.opt[0]);

}

Collectives™ on Stack Overflow

Adding option from input dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related