Question

我有一个带有select标签的表单。我需要根据用户的选择更改表单。我被认为最简单的方法是使用JQuery。这是我的代码：

<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>

<?php 
  $sql_cat= "SELECT * FROM category";
  $result = mysqli_query($conn,$sql_cat);   
  $cat_items="";
  if($result) {
    while($cats = $result->fetch_assoc()) { 
      echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
    }
  } else {
    echo '';
  }
?>

</select>
</div>

<div id="addhtml"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#category").change(function() {
  alert("event triggered");

  var val = $(this).val();
  if (val == "number" || val == "symbol") {
     $("#addhtml").html(<?php include("html/form_number.html"); ?>);
  } else if (val == "letter") {
    $("#addhtml").html(<?php include("html/form_letter.html"); ?>);
  } else {
    $("#addhtml").html(<?php include("html/form_other.html"); ?>);
  }
});

});
</script>

注意：php while语句只设置＆＃34; number＆＃34;，＆＃34; symbol＆＃34;的当前三个选项。或＆＃34;字母＆＃34;分别为1,2和3的ids

当我更改类别时，它不会触发jquery.change（）我想在不使用addhtml div的情况下对表单进行编码，但如果有必要，我愿意使用它。

问题：是不是因为我使用php设置选项的值而触发更改功能的原因？如果是这样我该如何解决？如果没有，为什么不被触发？如何实现不使用addhtml div的目标？有没有更好的方法来实现我的目标？
提前致谢。

修改初步问题的答案：如bistoco所述，php由服务器预编译并以html格式发送，因此问题不在于使用php来设置select标记的值。

我现在已经确定这是由于我的php include文件的内容。我已经确定它注册了change事件并且如果我的文件很简单就加载内容就好了：

"<div><label>New Number</label></div>"

但如果我添加任何空格或\n字符以便人类可读性：

"<div>
  <label>New Number</label>
</div>"

它不仅不起作用，而且还完全跳过了更改事件。

新问题：jquery html函数是否有一个非法字符列表会导致它失败？为什么在它不喜欢我php include文件的内容时甚至没有注册更改功能？

Answer 1

你必须要了解的第一件事是php在服务器上运行，所有输出都被呈现并作为html代码发送到浏览器，并且在那里不可用。

那就是说，你至少有两个选择：

1.-回显所有表单选项，每个表单选项都在div中，您可以根据所选择的选项隐藏/显示。

<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>

<?php 
  $sql_cat= "SELECT * FROM category";
  $result = mysqli_query($conn,$sql_cat);   
  $cat_items="";
  if($result) {
    while($cats = $result->fetch_assoc()) { 
      echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
    }
  } else {
    echo '';
  }
?>

</select>
    <!-- ECHOING ALL FORM OPTIONS -->
    <div class="option-form" id="form-option-symbol"><?php include("html/form_number.html"); ?></div>
    <div class="option-form" id="form-option-letter"><?php include("html/form_letter.html"); ?></div>
    <div class="option-form" id="form-option-other"><?php include("html/form_other.html"); ?></div>
</div>

<style>
    div.option-form {
        display:none; /* HIDE ALL DIVS BY DEFAULT */
    }
</style>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#category").change(function() {
    // HIDE ALL DIVS
    $('div.option-form').hide();
      var val = $(this).val();
      if (val == "number" || val == "symbol") {
         $('form-option-symbol').show();
      } else if (val == "letter") {
         $('form-option-letter').show();
      } else {
        $('form-option-other').show();
      }
  });
});
</script>

2.-使用模板系统或使用ajax加载部分html片段。

Answer 2

PHP是一个预处理器，因此稍后添加到网站中是没用的。只需使用设置html或将.prepend（）或.append（）与表单元素一起使用即可创建表单。

<form class="myform">
</form>

和jquery

$('.myform').html('<input type="submit">');

或

$('.myform').append('<input type="submit"');

编辑：读错了你的代码

  <?php include('test.html'); ?>

不认为这样可行。

Answer 3

而不是

 $("#addhtml").html(<?php include("html/form_number.html"); ?>);

等，试试

 $("#addhtml").html("<?php include("html/form_number.html"); ?>");

以便将html视为字符串。

另外，请确保表单文件没有html，head和body等标记，并且只包含实际表单。

编辑：我刚看到@nnnnn已经说明了这一点，必须在信用到期时给予信用

Answer 4

我认为您可能只需更改变量“val”声明即可使代码正常工作。我不认为

var val = $(this).val();

会奏效。根据你所做的比较，我认为它应该是：

var val = $(this).children("option:selected").text();

将允许您获取select元素的选定选项的文本值。

使用Jquery根据用户输入更改表单

4 个答案: