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

Change table cell content based on select option?

本文关键字：表格 单元格 选择 选项      更新时间：2023-09-26

这里是选择块：

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

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

单个相等用于赋值而非比较，您应该使用==或===来检查是否选择了这些值。

您还试图检查字符串值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"
        }
    }

首先，要比较java脚本中的两个对象，应该使用==而不是=。

此外，您应该按照本文中的指示从SELECT中检索所选的值。

好吧，让我们来分解一下。首先，您缺少了许多分号;。其次，您需要使用==在if语句内部进行比较，而不仅仅是=。第三，通常更容易通过检查所述选择的值来检查选择的值，而不是每个单独的选项。

这里有一些工作代码和一个工作演示。

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";
  }
}
相关文章：