使用选择框动态更新值

Question

我对JS很新，尝试创建一个选择框，使用选择框动态更新多个值。我在网上发现了一些样品，但没有一个似乎正在做我所需要的。

小提琴： https://jsfiddle.net/badatz/18ncvkur/1/

function OnSelectionChange(select) { 
 
    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; 
 
}

<table border="1" align="center" cellspacing="8"> 
 
    <tr> 
 
    <td>Field 1</td> 
 
    <td>Field 2</td> 
 
    <td>Field 3</td> 
 
    <td>Field 4</td> 
 
    <td>Field 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="p1">Change me</td> 
 
    <td id="p2">Change me</td> 
 
    <td id="p3">Change me</td> 
 
    <td id="p4">Change me</td> 
 
    <td id="p5">Change me</td> 
 
</table> 
 
<br> 
 
<div align="center"> 
 
    <select onchange='OnSelectionChange (this)'> 
 
    <option id="G1" id2='Green' id3="Greg" id4="Boy" id5="GGG">Green</option> 
 
    <option id="Y1" id2='Yellow' id3="Yolanda" id4="Girl" id5="YYY">Yellow</option> 
 
    <option id="R1" id2='Red' id3="Rob" id4="Boy" id5="RRR">Red</option> 
 
    </select> 
 
</div>

谢谢大家新年快乐！

Answer 1

我做了一个改变你的小提琴，使其更多一点"DRY"。

我还注意到您的表格缺少关闭<tr>标记。

下面是一段代码演示。

/** 
 
* Gets called when the change event gets fired on the select element. 
 
* 
 
* @param {string=} ddwnId The identifier of the select element. 
 
*/ 
 
function OnSelectionChange(ddwnId) { 
 
    var selectedOption = this.options[this.selectedIndex]; 
 
    var dataset = selectedOption.dataset; 
 
    var pId = ''; 
 
    var attrId = ''; 
 
    /* 
 
    On the select element above I have added an id attribute and set it 
 
    to "id1". You could access that Id and use that in the switch statement 
 
    below. The other option is just to pass the Id in as a parameter to our 
 
    OnSelectionChange function. 
 
    */ 
 
    var id = this.id; 
 
    
 
    switch (ddwnId) { 
 
    case "id1": 
 
     alert(`Dropdown with id "${ddwnId}" triggered OnSelectionChange!`); 
 
     break; 
 
    default: 
 
     //No case was found for that dropdown id. 
 
     break; 
 
    } 
 

 
    for (var i = 1; i <= 5; i++) { 
 
    pId = 'p' + i; 
 
    attrId = 'id' + i; 
 

 
    document.getElementById(pId).innerHTML = dataset[attrId]; 
 
    } 
 
}

<table border="1" align="center" cellspacing="8"> 
 
    <tr> 
 
    <td>Field 1</td> 
 
    <td>Field 2</td> 
 
    <td>Field 3</td> 
 
    <td>Field 4</td> 
 
    <td>Field 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="p1">Change me</td> 
 
    <td id="p2">Change me</td> 
 
    <td id="p3">Change me</td> 
 
    <td id="p4">Change me</td> 
 
    <td id="p5">Change me</td> 
 
    <!-- You were missing a closing tag here... --> 
 
    </tr> 
 
</table> 
 
<br> 
 
<div align="center"> 
 
    <select id="id1" onchange='OnSelectionChange.call(this, "id1")'> 
 
    <option data-id1="G1" data-id2='Green' data-id3="Greg" data-id4="Boy" data-id5="GGG">Green</option> 
 
    <option data-id1="Y1" data-id2='Yellow' data-id3="Yolanda" data-id4="Girl" data-id5="YYY">Yellow</option> 
 
    <option data-id1="R1" data-id2='Red' data-id3="Rob" data-id4="Boy" data-id5="RRR">Red</option> 
 
    </select> 
 
</div>