選択リストの更新既存のオプション

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の例です。

EDIT ユーザーはちょうどあなたがこれを行うことができ、入力にオプションを置くために...]ボタンをクリックするか、しない場合は、あなたが更新するオプションを望んでいたかどうかわからないあなたの質問イムを再読み込みした後。

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を与えます。

例：：

あなたの場所にテキストボックスから新しい値をピックアップし、ドロップダウンにそれを挿入するその単純な問題をIDを持っていたら <select id='myDropDown'>

：この場合、例えばのために、あなたのような何かを行うことができます

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