选中通过JavaScript填充的下拉值选择复选框

Question

选中通过JavaScript填充的下拉值选择复选框

Dan*_*iel 7 html javascript php checkbox drop-down-menu

我为6个场景准备了6个复选框：

    <tr style="height: 21px;">
<td style="width: 25%; height: 21px;">COB</td>
<td style="width: 25%; height: 21px;"><input name="COB" type="checkbox" id="COB" value="1" <?php if($_GET['COB'] == '1'){  echo 'checked="checked"';}?>/>           </td>
<td style="width: 25%; height: 21px;">SMT</td>
<td style="width: 25%; height: 21px;">  <input name="SMT" id="SMT" type="checkbox" value="1" <?php if($_GET['SMT'] == '1'){  echo 'checked="checked"';}?>/> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;">BGA</td>
<td style="width: 25%; height: 21px;">  <input name="BGA" id="BGA" type="checkbox" value="1" <?php if($_GET['BGA'] == '1'){  echo 'checked="checked"';}?>/> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;">  TSOP Typ 1 </td>
<td style="width: 25%; height: 21px;"><input name="TSOP" id="TSOP" type="checkbox" value="1"<?php if($_GET['TSOP'] == '1'){  echo 'checked="checked"';}?> /></td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> TSOP Typ 2</td>
<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"<?php if($_GET['TSOP'] == '2'){  echo 'checked="checked"';}?> />   </td>

</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> LGA</td>
<td style="width: 25%; height: 21px;"><input name="LGA" id="LGA" type="checkbox" value="1"<?php if($_GET['LGA'] == '1'){  echo 'checked="checked"';}?> />    </td>
</tr>

Run Code Online (Sandbox Code Playgroud)

在这里，PHP部分介绍了如何填充下拉列表。

<td style="width: 14.2857%; height: 21px;">  <select id="FlashID" name="FlashID" onchange="FlashFunction()" size="1" >

                    <option disabled selected value> </option>;                             
            <?php
            foreach($connection->query($flash) as $m)
            {
                        if($m['FlashID'] == $_GET['FlashID']){
                $isSelected = 'selected="selected"';
            }else{
                $isSelected = '';
            }
            echo "<option data-COB='".$m['COB']."' data-SMT='".$m['SMT']."' data-BGA='".$m['BGA']."' data-TSOP='".$m['TSOP']."' data-LGA='".$m['LGA']."' value='" . $m['FlashID'] . "'".$isSelected."  >" .$m['SAP'] ."</option>";

            }
            ?> 
            </td>

Run Code Online (Sandbox Code Playgroud)

这是填充的下拉列表的SQL表

FlashID   SAP   COB   SMT   BGA   TSOP    LGA
1        102292  0     1     0     2       0
3        102293  0     1     0     2       0
4        102294  0     1     0     2       0
5        102296  0     1     0     0       1
6        102412  0     1     0     1       0
7        102413  0     1     0     1       0
8        102414  0     1     0     1       0
9        102651  0     1     0     2       0
10       102652  0     1     0     2       0
11       102664  0     1     0     2       0

Run Code Online (Sandbox Code Playgroud)

这是我无法使用的Javascript部分：

<script>
function FlashFunction(){
var index = document.getElementById("FlashID").selectedIndex;
var COB = document.getElementById("FlashID").options[index].getAttribute("data-COB");
var SMT = document.getElementById("FlashID").options[index].getAttribute("data-SMT");
var BGA = document.getElementById("FlashID").options[index].getAttribute("data-BGA");
var TSOP = document.getElementById("FlashID").options[index].getAttribute("data-TSOP");
var LGA = document.getElementById("FlashID").options[index].getAttribute("data-LGA");
document.getElementsByName("COB")[0].value = COB;
document.getElementsByName("SMT")[0].value = SMT;
document.getElementsByName("BGA")[0].value = BGA;
document.getElementsByName("TSOP")[0].value = TSOP;
document.getElementsByName("TSOP2")[0].value = TSOP;
document.getElementsByName("LGA")[0].value = LGA;
}
</script>

Run Code Online (Sandbox Code Playgroud)

请注意，TSOP的值为1或2。

对于前。您已经看到是否选择了FlashID6。应该选中TSOP和SMT复选框。

但是atm我不知道为什么我的Javascript不能正常工作该如何处理？有人可以帮忙吗？

Answer 1

Nar*_*dra 0

根据DOM 标准，elemnet ID 在整个文档中应该是唯一的。在您的代码中，两个input具有相同的 id TSOP。

我已经为您创建了 codepen示例，以表明 JAVASCRIPT 部分正在工作，您的 PHP 代码可能存在一些问题。

function FlashFunction() {

  var index = document.getElementById("FlashID").selectedIndex;


  var SMT = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-SMT");

  var BGA = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-BGA");
  var TSOP = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-TSOP");


  var LGA = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-LGA");


  document.getElementsByName("COB")[0].value = COB;
  document.getElementsByName("SMT")[0].value = SMT;
  document.getElementsByName("BGA")[0].value = BGA;
  document.getElementsByName("TSOP")[0].value = TSOP;
  document.getElementsByName("TSOP2")[0].value = TSOP;
  document.getElementsByName("LGA")[0].value = LGA;
  
  if (TSOP == 1) {
    document.getElementsByName("TSOP")[0].checked = true;
  }
}

Run Code Online (Sandbox Code Playgroud)

<select id="FlashID" name="FlashID" onchange="FlashFunction()">
  <option data-SMT="1" value="volvo">102292</option>
  <option data-SMT="1" value="saab">102293</option>
  <option data-SMT="1" data-TSOP="1" value="mercedes">102412</option>
</select>
<table>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;">COB</td>
    <td style="width: 25%; height: 21px;"><input name="COB" type="checkbox" id="COB" value="1" /> </td>
    <td style="width: 25%; height: 21px;">SMT</td>
    <td style="width: 25%; height: 21px;"> <input name="SMT" id="SMT" type="checkbox" value="1" </td>
  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;">BGA</td>
    <td style="width: 25%; height: 21px;"> <input name="BGA" id="BGA" type="checkbox" value="1" </td>
  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"> TSOP Typ 1 </td>
    <td style="width: 25%; height: 21px;"><input name="TSOP" id="TSOP" type="checkbox" value="1" </td>
  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"> TSOP Typ 2</td>
    <td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2" </td>

  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"> LGA</td>
    <td style="width: 25%; height: 21px;">
      <input name="LGA" id="LGA" type="checkbox" value="1" </td>
  </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，11 月前
查看次数：	161 次
最近记录：	6 年，11 月前