Select 標簽 HTML 動態 javaScript PHP

Question

您好，我想要實現的是使用 JavaScript 使“選擇表單 HTML”動態化，我的意思是我希望每次 select 時都必須選擇一個下拉列表，該值是我設置為該標簽的值。

來自標簽的數據來自數據庫我使用 php 循環數據

前任。 1 src： 在更改時從 Select 獲取選定的值/文本
此示例 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 那些 function 每次我選擇/單擊它們 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 中您可以看到第一個示例 select 形式 html 將獲取選項標簽的值，對吧？
現在在示例 2 中，當我單擊 F1 或 F2 時，它將運行 function

所以我需要程序將一個值從我的數據庫傳遞到我的 javaScript function 並像在警報或示例 1 中一樣運行它，但在“選擇標簽”Z4C4AD5FCA2E7A3F74DBB1CED00381AAZ 版本中

前任。 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>

正如您在我的第一個示例中看到的那樣，當我在 select 下拉列表中看到“選擇標簽”HTML 時，它會返回給我一個值，對吧？ When I select the dropdown it will accept the value I pass in function "appsFunction(passVar)" appsFunction('<?php echo $row['colName2']; ?>') from select tag which the value is from my database. .所以我需要幫助知道如何正確地做到這一點..

NOTE: The function must be run when I select the dropdown, the function must be accept the value I set which from my database it's like totally example number 2 but in Select tag HTML version not just text or html table.

提前感謝您解決我的問題。

Answer 1

如果您在select元素本身上注冊一個事件處理程序來偵聽change事件，您將能夠處理選定的 OPTION 並訪問與其關聯的任何值/屬性。 您不能像在此處嘗試那樣將事件處理程序直接分配給OPTION元素。 您可以根據需要向OPTION元素添加任意數量的dataset屬性，但是您可以在 Javascript 事件處理程序中輕松訪問這些屬性。

如果您傳遞給 SQL 語句的值是dynamic的（通常來自 GET 或 POST 請求），您確實需要使用准備好的語句來幫助緩解 SQL 注入攻擊。

由於您的select菜單僅使用mytable表中的 3 列，因此您應該將返回的字段限制為這些列，這反過來在使用 Prepared Statement 時會有所幫助，因為您可以輕松地將結果分配為變量。

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