Question

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

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

operator<<

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

Answer 1

使用自定义属性（data attributes）时，理想情况下，您必须在data-前加上element.dataset.attributeName并使用function OnSelectionChange(select) { 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; }访问它 - 请参阅updated fiddle here并演示下面：

<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" data-id2='Green' data-id3="Greg" data-id4="Boy" data-id5="GGG">Green</option>
    <option id="Y1" data-id2='Yellow' data-id3="Yolanda" data-id4="Girl" data-id5="YYY">Yellow</option>
    <option id="R1" data-id2='Red' data-id3="Rob" data-id4="Boy" data-id5="RRR">Red</option>
  </select>
</div>

rotation_mats=numpy.array([numpy.cos(theta),0,numpy.sin(theta)])

Answer 2

我已经改变了你的小提琴，使其更加"DRY"。

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

以下是演示文稿的片段。

＆＃13;

/**
 * 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];
  }
}

＆＃13;

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

＆＃13;

Answer 3

问题是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"
    }
};

现在，您可以通过引用对象内的键来使用此对象将特定值读入表中。

使用选择框动态更新值

3 个答案: