單擊按鈕時，更改選擇標記內的值

Question

我有一個帶有選擇標記的表格，其中有一些選項。 我希望當我單擊按鈕以更改選擇標記中的值時，這樣標記將具有我定義的值

document.getElementById('fruits').innerHTML="computer"

在此JSFiddle中 ，當我單擊按鈕時它不起作用。

Answer 1

正如我看到的jQuery，您可以嘗試：

HTML：

<select id="sel">
    <option>Apple</option>
    <option>Orange</option>
</select>
<input type="button" value="change" onclick="fill()">

JS：

function fill() {
    $('#sel').empty();
    $("#sel").append(new Option("Computer"));

}

演示

或者使用香草js，您可以嘗試：

function fill(){
    document.getElementById('sel').innerHTML="<option>Computer</option>";
}

演示2

Answer 2

function fill(){
    document.getElementById('fruits').innerHTML="<option>Meat</option>";}

<select id="fruits">
    <option> Apple</option>
    <option> Orange</option>
</select>

如果我做對了，請在您的代碼中進行這些更改。

Answer 3

嘗試這個

$('#change').click(function() {
    document.getElementById('fruits').innerHTML="<option>Meat</option>";
});

修改HTML為

<select id="fruits"> 
    <option> Apple</option>
    <option> Orange</option>
</select>

<input type="button" value="change" name="change" id="change">

Answer 4

 your html is wrong. use the code like:

 <select id="fruits">
        <option>Apple</option>
        <option>Orange</option>
  </select>

  <input type="button" value="change" onclick="fill();" />

 And change the fill function to:

  function fill() {
        document.getElementById('fruits').innerHTML = "<option>Meat</option>";
    }