选择标签 HTML 动态 javaScript PHP

Question

您好，我想要实现的是使用 JavaScript 使“选择表单 HTML”动态化，我的意思是我希望每次选择下拉列表时都必须选择我设置给该标签的值。

标签中的数据来自数据库我使用php循环数据

例如。 1 来源：Get selected value/text from Select on change
此示例 100% 工作正确，但我需要的不是获取值，而是分配下一个示例 2 下的示例

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

ex 2 每次我选择/单击它们中的每一个 F1 或 F2 时，这些功能都会发出警报或运行

<table>
    <tr>
      <td onclick="myFunction1()">F1</td>
      <td onclick="myFunction2()">F2</td>
    </tr>
</table>

<script>
 
 // Function 1 will run when I click the F1 
 function myFunction1() { alert('myFunction1'); }
 // Function 2 will run when I click the F2
 function myFunction2() { alert('myFunction2'); }

在示例 1 中，您可以看到第一个示例选择表单 html 将获取选项标签的值，对吧？
现在在示例 2 中，当我单击 F1 或 F2 时，它将运行该函数

所以我需要程序将一个值从我的数据库传递到我的 javaScript 函数并像在警报或示例 1 中一样运行它，但在“选择标签”HTML 版本中运行它

例如。 3 这是我的查询

 <form action=""> 
  <select name="customers" id="myId" class="form-control">
    <option value="">Select a customer:</option>

 <?php 
    
 $user_id =  1;
 
 $sql     = "SELECT * FROM `myTable` WHERE user_id = '$user_id' Order by create_at DESC";
 $result  = $mysqli->query($sql);
 
 if ($result->num_rows > 0) {
   
  // output data of each row
  while($row = $result->fetch_assoc()) 
  { ?>
    
   <!-- appsFunction('<?php echo $row['colName2']; ?>') << will be the value that should run in console.log -->
   <option value="<?php echo $row['id']; ?>" onclick="appsFunction('<?php echo $row['colName2']; ?>')"><?php echo $row['colName1']; ?></option>

  <?php }
  
 } else {  return false;  }
 
 ?>
 </select>
</form>

例如。 3 部分 2 javascript

<script>

function appsFunction(passVar) {
  
  colose.log(passVar);

}

</script>

正如您在我的第一个示例中看到的那样，当我选择下拉列表时，它会返回一个值给我，对吗？在第二个示例中，当我单击 F1 或 F2 时，它将运行该函数然后返回警报，我这里需要的是当我选择下拉列表时，它将接受我从选择标签中传入的函数“appsFunction(passVar)”appsFunction('<?php echo $row['colName2']; ?>') 中的值，该值来自我的数据库..所以我需要帮助知道如何正确地做到这一点..

注意： 当我选择下拉菜单时，该函数必须运行，该函数必须接受我从我的数据库中设置的值，这完全是示例编号 2，但在 Select tag HTML 中版本不仅仅是文本或 html 表格。

提前感谢您解决我的问题。

Answer 1

如果您在 select 元素本身上注册一个事件处理程序来侦听 change 事件，您将能够处理选定的 OPTION 并访问与其关联的任何值/属性。您不能像在此处尝试那样将事件处理程序直接分配给 OPTION 元素。您可以根据需要向OPTION 元素添加任意数量的dataset 属性，但是您可以在Javascript 事件处理程序中轻松访问这些属性。

如果您传递给 SQL 语句的值是 dynamic（通常来自 GET 或 POST 请求），您确实需要使用 Prepared Statement 来帮助缓解 SQL 注入攻击。

由于您的 select 菜单仅使用 mytable 表中的 3 列，您应该将返回的字段限制为这些列，这反过来有助于使用准备好的语句，因为您可以轻松地将结果分配为变量。

<form name='geronimo'> 

    <select name="customers" class="form-control">
        <option selected hidden disabled>Select a customer:
        <?php 

            $user_id =  1;

            $sql="select `id`, `colName1`, `colName2` from `mytable` where user_id = ? order by create_at desc";
            $stmt=$mysqli->prepare($sql);
            $stmt->bind_param('s',$user_id);
            $res=$stmt->execute();
            
            if( $res ){
                $stmt->bind_result($id,$col1,$col2);
                while( $stmt->fetch() ){
                    printf('<option value="%s" data-col="%s">%s', $id, $col2, $col1 );
                }
                $stmt->free_result();
                $stmt->close();
            }
        ?>
    </select>
</form>


<script>
    document.forms.geronimo.customers.addEventListener('change',function(e){
        let id=this.value;
        let col2=this.dataset.col;
        let col1=this.options[this.options.selectedIndex].text;
        
        alert( id + ' ' + col2 + ' ' + col1 )
    });
</script>