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.

There's a lot wrong with the code, but the biggest problem is that you're assigning "true" to `y.selected` which then is considered "truthy" (assigning the value returns the assigned value). What you meant to use was `y.selected == "true"`, but even that is probably incorrect I think. — Joseph Marikle, Jan 12 '16 at 20:49

IrkenInvader · Accepted Answer · 2016-01-12T20:55:17.680

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

I would recommend using the `===`. – Joseph Marikle Jan 12 '16 at 20:54 — Joseph Marikle, Jan 12 '16 at 20:54

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

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 .

edited May 23 '17 at 12:04

Community

1
1

answered Jan 12 '16 at 20:51

Younes Regaieg

4,156
2
21
37

score 0 · Answer 3 · answered Jan 12 '16 at 21:00

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

Change table cell content based on select option?

3 Answers3