将带有来自 MySQL 的数据的 <select> 元素添加到表单中答案

【问题标题】：Add <select> element with data from MySQL to form将带有来自 MySQL 的数据的 <select> 元素添加到表单中
【发布时间】：2012-06-14 20:49:03
【问题描述】：

我正在尝试使用基于 jQuery 的 .change 函数动态创建的 <select> 元素创建一个表单。我想要三个 <select elements> 选项值根据用户在前一个元素中选择的内容而变化。

我有这个代码。

students.php:

<form action='../insert.php' method='post' name='add_student'>

<!-- This is generated by PHP -->

<select id='add_student_customer'>
    <option>Select one...</option>
    <option value='1'>First value</option>
    <option value='2'>Second value</option>
    <option value='3'>Third value</option>
</select>

<!-- Here a select element will load from another PHP-file based on values from the previous select -->
<div id='add_student_contactperson_container'></div>

<!-- This is generated on page load but will not be visible until we select something in the previous select -->
<select id='add_student_course'>
  <option>Select something...</option>
  <option value='1'>An option</option>
  <option value='2'>A second option</option>
</select>
</form>

jQuery：

<script>

$(document).ready(function() {
$("#add_student_course").hide()
$("#add_student_customer").change (function(){
    var row_id = $(this).val();
    $.ajax({
        url: "/load_customer_contacts.php",
        data: { 'customer_id':row_id },
        success: function(data){
            $("#add_student_contactperson_container").html(data);
        }
    });
});

$("#add_student_contact").change(function() {
    $("#add_student_course").show();
  });
});

</script>

但是$("#add_student_course").show(); 事件不起作用。任何想法为什么？另外我想知道，我能否使用从load_customer_contacts.php" 加载到我的<form> 的<select>-id？即使在页面加载之后加载它也会跟随吗？

【问题讨论】：

id为add_student_course的元素定义在哪里？
@DvirAzulay 是 add_student_course 要定义的变量或函数吗？

标签： jquery ajax forms load

【解决方案1】：

您是否希望从 ajax 加载 #add_student_contact？

如果是这样，那么您需要以不同的方式注册您的事件，以便它适用于在初始化后添加到 DOM 的元素，如下所示：

$(document).on("change", "#add_student_contact", function(){
   $("#add_student_course").show();
});

我选择了上述方法而不是$("#add_student_contact").on，因为我最近遇到了这个问题。我不确定确切的原因，它可能不适用于这里，但我只知道我必须在 document 上执行此操作才能使其正常工作。

【讨论】：

当通过类选择器附加事件时，您的解决方案可能性能更好。
您好，感谢您的评论。这并没有真正解决我的问题，因为$(document).on("change", function() 在我的第一次选择更改时触发，我希望它仅在我的第二次更改后触发。你对我的第二个问题有什么想法吗？该 ID 可以用于我的表单吗？
@David，我稍微改变了我的答案。不，我不确定你的第二个问题对不起
谢谢，第一部分现在正在工作。但是，ID 并没有像我预期的那样在 POST 上出现......我想我面前有一些谷歌搜索。还是谢谢
POST 数据不能基于name 属性工作吗？而不是 ID...我可能错了，但可能值得一试；）

【解决方案2】：

在动态加载的东西上，你需要使用 jQuery.On 附加偶数

您的#add_student_contact 似乎是动态添加的。

$("#add_student_contact").on('change',(function() {
  $("#add_student_course").show();
});

关于您的第二个问题：load_customer_contacts.php 是通过 AJAX 调用加载的。这不会重新加载您的页面，如果您从 php 例程返回的数据是有效的 html，它应该显示在您的表单中

【讨论】：