javascript 更新选择列表中的现有选项

update existing option in select list

提问by firestruq

Let's say that I have select list with 3 options inside:

假设我有一个包含 3 个选项的选择列表：

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

Now, I want to update one of these options, so i create textfield & button. The option appear inside the textfield everytime i press on one of the options at the select list. Can someone direct me what do i need to do?

现在，我想更新这些选项之一，所以我创建了文本字段和按钮。每次我按下选择列表中的选项之一时，该选项都会出现在文本字段内。有人可以指导我我需要做什么吗？

thanks

谢谢

回答by gor

Use jquery :selectedselector and val()method.

使用 jquery :selected选择器和val()方法。

$('select:selected').val($('input_textbox').val());

回答by u476945

Adding up to the first example that we had this morning jsfiddle

加上我们今天早上jsfiddle的第一个例子

HTML:

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:

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 i added an edit field that when clicked it'll edit the value and text of the currently selected option, and when you select a new option it'll propogate the textfield with the currently selected option so you can edit it. Additionally, i also added a delete function since i figure you might need it in the future.

基本上，我添加了一个编辑字段，单击该字段时，它将编辑当前选定选项的值和文本，当您选择一个新选项时，它将使用当前选定的选项传播文本字段，以便您可以对其进行编辑。此外，我还添加了一个删除功能，因为我认为您将来可能需要它。

回答by sharmaprateek

First of all always give an ID to your input tags. For eg in this case you can do something like: <select id='myDropDown'>

首先，始终为您的输入标签提供一个 ID。例如，在这种情况下，您可以执行以下操作：<select id='myDropDown'>

Once you have the ID's in place its simple matter of picking up the new value from textbox and inserting it into the dropdown:

一旦您有了 ID，就可以从文本框中获取新值并将其插入下拉列表中的简单问题：

Eg:

例如：

// Lets assume the textbox is called 'myTextBox'
// grab the value in the textbox
 var textboxValue = document.getElementById('myTextBox').value;

// Create a new DOM element to be inserted into Select tag
 var newOption = document.createElement('option');
 newOption.text = textboxValue;
 newOption.value = textboxValue;

// get handle to the dropdown
 var dropDown = document.getElementById('myDropDown');

// insert the new option tag into the dropdown.
 try {
   dropDown.add(newOption, null); // standards compliant; doesn't work in some versions of IE
 }
 catch(ex) {
   dropDown.add(newOption); // IE only
 }

回答by Loktar

Below is a pure js example using your markup.

下面是一个使用您的标记的纯 js 示例。

EDITAfter rereading your question Im not sure if you wanted the option to update when a user clicked the button or not.. To just put the option into an input you can do this.

编辑重读您的问题后，我不确定您是否希望在用户单击按钮时更新选项.. 只需将该选项放入输入中，您就可以执行此操作。

var select = document.getElementsByTagName("select")[0],
    input = document.getElementById("inputEl");

select.onchange = function(){
     input.value = this[this.selectedIndex].text;
}

To update the option to what the user typed in is below.

将选项更新为用户输入的内容如下。

http://jsfiddle.net/loktar/24cHN/6/

http://jsfiddle.net/loktar/24cHN/6/

Markup

标记

<select>
     <option>1</option>
      <option>2</option>
      <option>3</option>
</select>
<br/>
<input type="text" id="inputEl"/>
<button id="button">Update</button>

Javascript

Javascript

var select = document.getElementsByTagName("select")[0],
    input = document.getElementById("inputEl"),
    button = document.getElementById("button");

select.onchange = function(){
    input.value = this[this.selectedIndex].text;

    var selected = this,
        selectedIndex = this.selectedIndex;

        button.onclick = function(){
          selected[selectedIndex].text = input.value;
    }  
}