Javascript 使用选择框动态更新值

我正在尝试创建一个选择框，它将使用选择框动态更新多个值。我在网上找到了一些样品，但没有一个完全符合我的要求

小提琴：

选择更改功能（选择）{ var selectedOption=select.options[select.selectedIndex]； document.getElementById（'p1'）.innerHTML=selectedOption.id； document.getElementById（'p2'）.innerHTML=selectedOption.id2； document.getElementById（'p3'）.innerHTML=selectedOption.id3； document.getElementById（'p4'）.innerHTML=selectedOption.id4； document.getElementById（'p5'）.innerHTML=selectedOption.id5； }

字段1
字段2
字段3
字段4
字段5
改变我
改变我
改变我
改变我
改变我


绿色
黄色的
红色

当使用自定义属性（）时，理想情况下，您必须使用

数据作为前缀-

并使用

元素.dataset.attributeName访问它-请参见下面的演示：


选择更改功能（选择）{
var selectedOption=select.options[select.selectedIndex]；
document.getElementById（'p1'）.innerHTML=selectedOption.id；
document.getElementById（'p2'）.innerHTML=selectedOption.dataset.id2；
document.getElementById（'p3'）.innerHTML=selectedOption.dataset.id3；
document.getElementById（'p4'）.innerHTML=selectedOption.dataset.id4；
document.getElementById（'p5'）.innerHTML=selectedOption.dataset.id5；
}

字段1
字段2
字段3
字段4
字段5
改变我
改变我
改变我
改变我
改变我


绿色
黄色的
红色

当使用自定义属性（）时，理想情况下，您必须使用

数据作为前缀-

并使用

元素.dataset.attributeName访问它-请参见下面的演示：


选择更改功能（选择）{
var selectedOption=select.options[select.selectedIndex]；
document.getElementById（'p1'）.innerHTML=selectedOption.id；
document.getElementById（'p2'）.innerHTML=selectedOption.dataset.id2；
document.getElementById（'p3'）.innerHTML=selectedOption.dataset.id3；
document.getElementById（'p4'）.innerHTML=selectedOption.dataset.id4；
document.getElementById（'p5'）.innerHTML=selectedOption.dataset.id5；
}

字段1
字段2
字段3
字段4
字段5
改变我
改变我
改变我
改变我
改变我


绿色
黄色的
红色

我对你的小提琴做了一个改动，使它更漂亮一点

我还注意到您的表缺少一个结束标记

下面是一个片段来演示

/**
*在select元素上激发更改事件时调用。
* 
*@param{string=}ddwnId选择元素的标识符。
*/
函数OnSelectionChange（ddwnId）{
var selectedOption=this.options[this.selectedIndex]；
var数据集=selectedOption.dataset；
var-pId=''；
var attrId=''；
/*
在上面的select元素上，我添加了一个id属性并对其进行了设置
您可以访问该Id并在switch语句中使用它
另一个选项只是将Id作为参数传递给我们的
OnSelectionChange函数。
*/
var id=this.id；
开关（ddwnId）{
案例“id1”：
警报（`SelectionChange！触发了id为“${ddwnId}”的下拉菜单！'）；
打破
违约：
//没有找到该下拉id的案例。
打破
}
对于（var i=1；i，我对你的小提琴做了一个改动，使它更大一点

我还注意到您的表缺少一个结束标记

下面是一个片段来演示


/**
*在select元素上激发更改事件时调用。
* 
*@param{string=}ddwnId选择元素的标识符。
*/
函数OnSelectionChange（ddwnId）{
var selectedOption=this.options[this.selectedIndex]；
var数据集=selectedOption.dataset；
var-pId=''；
var attrId=''；
/*
在上面的select元素上，我添加了一个id属性并对其进行了设置
您可以访问该Id并在switch语句中使用它
另一个选项只是将Id作为参数传递给我们的
OnSelectionChange函数。
*/
var id=this.id；
开关（ddwnId）{
案例“id1”：
警报（`SelectionChange！触发了id为“${ddwnId}”的下拉菜单！'）；
打破
违约：
//没有找到该下拉id的案例。
打破
}
对于（var i=1；i而言，问题在于Javascript不知道id2、id3、id4和id5。我不确定您要做什么，但将多个值放入HTML标记的id*属性中对我来说并不合适

您可能希望使用对象，例如：

var persons = {
    G1: {
        name: "Greg",
        gender: "Boy",
        color: "Green",
        colorCode: "GGG"
    },
    Y1: {
        name: "Yolanda",
        gender: "Girl",
        color: "Yellow",
        colorCode: "YYY"
    },
    R1: {
        name: "Rob",
        gender: "Boy",
        color: "Red",
        colorCode: "RRR"
    }
};

现在，您可以使用此对象通过引用对象内的键将特定值读取到表中。
问题是Javascript不知道id2、id3、id4和id5。我不确定您要做什么，但将多个值放入HTML标记的id*属性中对我来说并不正确

您可能希望使用对象，例如：

var persons = {
    G1: {
        name: "Greg",
        gender: "Boy",
        color: "Green",
        colorCode: "GGG"
    },
    Y1: {
        name: "Yolanda",
        gender: "Girl",
        color: "Yellow",
        colorCode: "YYY"
    },
    R1: {
        name: "Rob",
        gender: "Boy",
        color: "Red",
        colorCode: "RRR"
    }
};

现在，您可以使用此对象通过引用对象内的键将特定值读取到表中。
Darnit您也打败了我，dataset是获得具有多个属性的内容的方法。如果您要将dataset用于所有内容，那么在dataset中创建第一个
id
难道没有意义吗？@WayneO不，因为
id
不是一个自定义属性，而且这不是一个好的实践……Darnit你也打败了我，dataset是获得具有多个属性的东西的方法。如果你打算将dataset用于所有事情，那么在dataset中创建第一个
id
不是很有意义吗？@WayneO不，因为
id
不是自定义属性，并且