javascript - update existing option in select list -


let's have select list 3 options inside:

<select>      <option>1</option>       <option>2</option>       <option>3</option> </select> 

now, want update 1 of these options, create textfield & button. option appear inside textfield everytime press on 1 of options @ select list. can direct me need do?

thanks

adding first example had morning jsfiddle

html:

<select id='myselect'>    <option value='1'>1</option>    <option value='2'>2</option>    <option value='3'>3</option> </select> <input type='text' value='1' name='mytext' id='mytext' /> <button value='add' id='addbtn' name='addbtn'>add</button> <button value='edit' id='editbtn' name='editbtn'>edit</button> <button value='delete' id='deletebtn' name='deletebtn'>delete</button> 

javascript:

var myselect = document.getelementbyid('myselect');  function createoption() {     var currenttext = document.getelementbyid('mytext').value;     var objoption = document.createelement("option");     objoption.text = currenttext;     objoption.value = currenttext;      //myselect.add(objoption);     myselect.options.add(objoption); }  function editoption() {     myselect.options[myselect.selectedindex].text = document.getelementbyid('mytext').value;     myselect.options[myselect.selectedindex].value = document.getelementbyid('mytext').value; }  function deleteoption() {     myselect.options[myselect.selectedindex] = null;     if (myselect.options.length == 0) document.getelementbyid('mytext').value = '';     else document.getelementbyid('mytext').value = myselect.options[myselect.selectedindex].text; }  document.getelementbyid('addbtn').onclick = createoption; document.getelementbyid('editbtn').onclick = editoption; document.getelementbyid('deletebtn').onclick = deleteoption;  myselect.onchange = function() {     document.getelementbyid('mytext').value = myselect.value; } 

basically added edit field when clicked it'll edit value , text of selected option, , when select new option it'll propogate textfield selected option can edit it. additionally, added delete function since figure might need in future.


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -