Change the values inside a select tag, when I click a button

Question

I have a form with a select tag that have some options. I want that when I click in the button to change the value in the select tag, and in that way the tag will have the value I define by

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

In this JSFiddle it does not function when I click the button.

Answer 1

As i see jquery you can try:

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"));

}

DEMO

Or with vanilla js you can try:

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

DEMO2

Answer 2

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

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

If I am getting you right then make these change in your code.

Answer 3

Try this

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

modified HTML to

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