Question

我有一个HTML表单和一个脚本，自动触发默认的“选项”（选项值是硬编码的）。

我还有一个独立的脚本，它根据MySQL中的特定列值动态创建“选项”选项。

问题：从动态生成列表的下拉列表中选择时，它不会“触发”任何内容（在这种情况下，也不会手动，也不会自动，手动就好了）

自动触发默认“选项”的表单：

<form>
    <select name="fruit" onchange="showFruit(this.value)">
        <option>Choice:</option>    
        <option value="1">Yellow Fruit</option>
        <option value="2">Red Fruit</option>
    </select>
</form>

<script>
    window.onload = function () {
        var el = document.getElementsByName('fruit')[0];
        el.value = 1; //Set default value
        el.onchange(); //trigger onchange event
    }

    function showFruit(val) {
        alert(val);
    }
</script>

从特定MySQL列生成动态创建的“选项”列表的代码：

<? $connect = mysqli_connect('localhost', '*', '*', '*');   
 $sql="SELECT DISTINCT(fruit_name) AS fruit_name FROM fruit ORDER BY fruit_name ASC"; 
 $result  = mysqli_query($connect, $sql);  

 if(mysqli_num_rows($result) > 0){  
 $select= '<select name="select">';
 while($rs = mysqli_fetch_array($result)){  
      $select.='<option value="'.$rs['id'].'">'.$rs['fruit_name'].'</option>';
  }
}
$select.='</select>';
echo $select;

如何将onload函数附加到动态生成的“选项”列表中？我根本不需要任何硬编码的“选项”。只是动态生成的一个。当我从列表中选择时，我想得到任何种类的回应/反应。

Answer 1

为了清楚起见，我可能会将它们分开，并将您的模板文件包含在逻辑文件中，该文件用于格式化页面数据。通过选择条件后面的选择菜单，您可以确保它只在您有数据放入时呈现。

我以特定的方式格式化了这个，你不需要遵循，但是选择一致的风格并坚持下去是相当不错的做法。我还将mysqli类的用法更新为面向对象的方法。请注意，在这种情况下，您在使用Mysqli->query时不会受到sql注入攻击，但如果您计划接受用户输入，则应研究预备语句以防止sql injection。

实际上我在模板文件中使用<?= ?>运算符这是<?php echo '';?>的简写，使用<?因为不鼓励你使用php文件的开头<?php。

PHP也允许短开标记<?（不鼓励使用，因为只有在使用short_open_tag php.ini配置文件指令启用时才可用，或者如果PHP配置了--enable -short-tags选项）。

混合PHP和HTML时，通常更清楚（意见！）尽可能使用替代if和loop语法（<?php if () : ?> <?php endif; ?>而不是<?php if () { ?> <?php } ?>），但两者都有效

逻辑文件

<?php  
  // page.php 
  $display = false;

  $mysqli = new mysqli(HOST, USER, PASSWORD, SCHEMA);
  $sql = "SELECT DISTINCT(fruit_name) AS fruit_name FROM fruit ORDER BY fruit_color ASC"; 
  $result = mysqli->query($sql);

  // not sure this is necessary in this particular case, but 
  if ($result->num_rows > 0) {
      $display = true;

      $select = []
      while ($row = $result->fetch_assoc()) {
          $select[] = "<option value=\"{$row['id']}\">{$row['fruit_name']}</option>";
      }
  }

  include 'htmlfile.php';
?>

模板文件

<!-- htmlfile.php -->
<form>
    <?php if ($display) : ?>
        <select name="select">
            <?= implode('', $select) ?>
        </select>
    <?php endif; ?>
</form>

<script>
    window.onload = function () {
        var el = document.getElementsByName('fruit')[0];
        el.value = 1; //Set default value
        el.onchange(); //trigger onchange event
    }

    function showFruit(val) {
        alert(val);
    }
</script>

HTML选择表单 - 如何触发“动态生成的选项”

1 个答案:

逻辑文件

模板文件