Change table cell content based on select option?

Question

Here is the select block:

<form>
            <select id="select">
                <option disabled selected value="choose">
                    CHOOSE
                </option>
                <option value="i2g" id="i2g">
                    iPhone 2g
                </option>
                <option value="i3g" id="i3g">
                    iPhone 3g
                </option>
            </select>
            <button onclick="func1()" type="button">
                GO
            </button>
</form>

Here is the table content:

<table id="iphone1g" border="1">
            <tr>
                <td id="itable1">
                    1
                </td>
                <td id="itable2">
                    2
                </td>
            </tr>
        </table>

Here's the javascript:

<script>
            var x = document.getElementById("i2g")
            var y = document.getElementById("i3g")
            var m = document.getElementById("itable1")
            var n = document.getElementById("itable2")
            function func1(){
                if (x.selected = "true"){
                    m.innerHTML = "hello"
                } 
                if (y.selected = "true"){
                    m.innerHTML = "adele"
                }
            }
        </script>

It doesn't work. I can choose only one option of the whole select and it can be only the last one.

Answer 1

Single equal is for assignment not comparison, you should be using == or === to check if those values are selected.

You are also trying to check string values of true, instead of the boolean true (.selected returns true or false not "true" or "false")

With both of these changes in place it should work.

   var x = document.getElementById("i2g")
    var y = document.getElementById("i3g")
    var m = document.getElementById("itable1")
    var n = document.getElementById("itable2")
    function func1(){
        if (x.selected === true){
            m.innerHTML = "hello"
        } 
        if (y.selected === true){
            m.innerHTML = "adele"
        }
    }

Answer 2

to start with, to compare two objects in java script you should be using == not = .

Besides, you should be retrieving the selected value from SELECT as instructed in this anwser .

Answer 3

Alright, let's break this down. First, you are missing a lot of semi-colons ; . Second, you need to use == to compare inside of an if statement, not just = . Third, it is generally easier to check the value of a select by checking the value of said select, instead of each individual option.

Here is some working code, and a working demo .

var m = document.getElementById("itable1");
var n = document.getElementById("itable2");

var select = document.getElementById("select");

function func1() {
  if (select.value == "i2g"){
    m.innerHTML = "hello";
  } 
  if (select.value == "i3g"){
    m.innerHTML = "adele";
  }
}