Question

基于下表中的下拉数据中选择的值是否已更改？

示例代码如下所述：

<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="FirstSet">Set1
  <option value="SecondSet">Set2
  <option value="ThirdSet">Set3
  <option value="FourthSet">Set4
</select>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    if (x == 'FirstSet' ) {
    x = 99;
    } else { x = 88; } 
    document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

<table>
 <tbody>
      <tr>
        <td><a >AA <button type="button" style="float: right;" >1</button></a></td>
        <td><a >BB <button type="button" style="float: right;" >3</button></a></td>
        <td><a >CC <button type="button" style="float: right;" >2</button></a></td>
        <td><a >DD <button type="button" style="float: right;" >4</button></a></td>      
      </tr>
      <tr>
        <td><a >AAA <button type="button" style="float: right;" >5</button></a></td>
        <td><a >BBB <button type="button" style="float: right;" >6</button></a></td>
        <td><a >CCC <button type="button" style="float: right;" >9</button></a></td>
        <td><a >DDD <button type="button" style="float: right;" >8</button></a></td>     
      </tr>
 </tbody>
</table>

</body>
</html>

Set 1是表中的默认值;

设置1（默认） AA = 1; BB = 3; CC = 2; DD = 4 AAA = 5; BBB = 6; CCC = 9; DDD = 8

如果我选择下面提到的Set2值，则必须使用下面提到的新值替换

设置2 AA = 11; BB = 33; CC = 44; DD = 88 AAA = 15; BBB = 45; CCC = 67; DDD = 8

同样，每组都有不同的值。

而不是在每个

级别更改值;如何将所有值一起更改？

Answer 1

您可以将不同的集存储在一个JSON文件中，并根据所选集调用它们。像{“set1”：[{“AA”：“1”，“BB”：“1”......}]}。要从JSON文件获取值，请使用XMLHTTPRequest或$ .getJSON（JQuery）

Answer 2

尝试使用 map 功能。并使用查询选择器。它将选择a>button。将所有值分配到数组中并与之匹配。

var a_tag=document.querySelectorAll('a > button');
            rep_array.map(function(a,b){
            a_tag[b].innerHTML=a;
              })

var rep_array=[11, 33 ,44 ,88,15,45 ,67 ,8]
function myFunction() {
    var x = document.getElementById("mySelect").value;
    if (x == 'FirstSet' ) {
    x = 99;
    } else { x = 88;
            var a_tag=document.querySelectorAll('a > button');
            rep_array.map(function(a,b){
            a_tag[b].innerHTML=a;
              })
           } 
    document.getElementById("demo").innerHTML = "You selected: " + x;
}

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="FirstSet">Set1
  <option value="SecondSet">Set2
  <option value="ThirdSet">Set3
  <option value="FourthSet">Set4
</select>

<p id="demo"></p>

<table>
 <tbody>
      <tr>
        <td><a >AA <button type="button" style="float: right;" >1</button></a></td>
        <td><a >BB <button type="button" style="float: right;" >3</button></a></td>
        <td><a >CC <button type="button" style="float: right;" >2</button></a></td>
        <td><a >DD <button type="button" style="float: right;" >4</button></a></td>      
      </tr>
      <tr>
        <td><a >AAA <button type="button" style="float: right;" >5</button></a></td>
        <td><a >BBB <button type="button" style="float: right;" >6</button></a></td>
        <td><a >CCC <button type="button" style="float: right;" >9</button></a></td>
        <td><a >DDD <button type="button" style="float: right;" >8</button></a></td>     
      </tr>
 </tbody>
</table>

另一个是forEach()与数组和元素

的索引匹配

 a_tag.forEach(function(a,b){
           a_tag[b].innerHTML=rep_array[b];
           })

var rep_array=[11, 33 ,44 ,88,15,45 ,67 ,8]
function myFunction() {
    var x = document.getElementById("mySelect").value;
    if (x == 'FirstSet' ) {
    x = 99;
    } else { x = 88;
            var a_tag=document.querySelectorAll('a > button');
            a_tag.forEach(function(a,b){
               a_tag[b].innerHTML=rep_array[b];
               })
              
           } 
    document.getElementById("demo").innerHTML = "You selected: " + x;
}

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="FirstSet">Set1
  <option value="SecondSet">Set2
  <option value="ThirdSet">Set3
  <option value="FourthSet">Set4
</select>

<p id="demo"></p>

<table>
 <tbody>
      <tr>
        <td><a >AA <button type="button" style="float: right;" >1</button></a></td>
        <td><a >BB <button type="button" style="float: right;" >3</button></a></td>
        <td><a >CC <button type="button" style="float: right;" >2</button></a></td>
        <td><a >DD <button type="button" style="float: right;" >4</button></a></td>      
      </tr>
      <tr>
        <td><a >AAA <button type="button" style="float: right;" >5</button></a></td>
        <td><a >BBB <button type="button" style="float: right;" >6</button></a></td>
        <td><a >CCC <button type="button" style="float: right;" >9</button></a></td>
        <td><a >DDD <button type="button" style="float: right;" >8</button></a></td>     
      </tr>
 </tbody>
</table>

根据DROPDOWN更改Tables值

2 个答案: