根据选择选项更改表格单元格内容?

时间:2016-01-12 20:44:55

标签: javascript html css

这是选择块:

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

以下是表格内容:

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

这是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>

它不起作用。我只能选择整个选择中的一个选项,它只能是最后一个选项。

3 个答案:

答案 0 :(得分:1)

Single equal用于赋值而不是比较,您应该使用==或===来检查是否选择了这些值。

你也试图检查字符串值为true,而不是布尔值true(.selected返回true或false而不是“true”或“false”)

如果这些变化都适用,它应该有效。

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

答案 1 :(得分:1)

首先,为了比较java脚本中的两个对象,你应该使用==而不是=

此外,您应该按照this anwser

中的说明从SELECT中检索选定的值

答案 2 :(得分:0)

好吧,让我们打破这个。首先,你遗漏了很多分号;。其次,您需要使用==来比较if语句的内部,而不仅仅是=。第三,通常通过检查所述选择的值而不是每个单独的选项来更容易地检查选择的值。

以下是一些工作代码和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";
  }
}