Question

我正在尝试创建一个具有<select>元素的表单，该表单是基于jQuery的.change函数动态创建的。我想让三个<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();事件不起作用。有什么想法吗？我还想知道，我是否可以使用从<select>加载到load_customer_contacts.php"的{{1}} - ID？即使在页面加载后加载了，它是否会跟随？

Answer 1

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

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

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

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

Answer 2

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

来连接

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

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

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

使用MySQL中的数据添加<select>元素以形成</select>

2 个答案: