更新现有的选项

Question

比方说，我有选择列表里面有3个选项：

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

现在，我要更新这些选项之一，所以我创建文本框&按钮。 每当我按下选择列表中的一个选项时，该选项就会出现在文本框内。 有人可以指导我，我需要做什么？

感谢

Answer 1

加起来，我们今天上午的第一个例子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; 
} 

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

Answer 2

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

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

Answer 3

以下是使用您的标记的纯js示例。

编辑 重读你的问题林不知道，如果你想选择更新，当用户点击该按钮或不..只是把选项为输入你可以做到这一点后。

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

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

将选项更新为用户键入的内容。

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

标记

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

的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; 
    } 
} 

Answer 4

首先总是给你的输入标签一个ID。对于例如，在这种情况下，你可以这样做：<select id='myDropDown'>

一旦你有了到位的ID其简单的从文本拿起新的价值，并将其插入到下拉的事情：

如：

// 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 
}