php - 使用 Ajax 和 PHP 更新表单中的 JQuery Mobile 选择菜单

Question

我正在使用 jQuery mobile 构建一个网站，其中涉及一个表单。

我一直在尝试实现此方法来动态更改选择菜单: Link

虽然我已经能够在 jQuery mobile 网站之外执行此操作，但它似乎无法与 jQuery mobile 一起使用。我已经设置了 data-ajax="false"并尝试了很多方法，但我找不到解决方案。这是不是因为 jQuery mobile？

您可以在下面找到代码。

对于主页:

<?php require('config_db.php');?>

...

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

...

<div data-role="fieldcontain">
    <label for="course">Course:</label>
    <select id="course" name="course" data-native-menu="false">
        <option value="0">0</option>
        <option value="1">1</option>
    </select>
</div>  
<div data-role="fieldcontain">
    <label for="student">Student:</label>
    <select id="student" name="Student" data-native-menu="false">
    </select>
</div>

...

<script type="text/javascript">
$(function() {
 $("#course").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "get_students.php",
         data: "course="+$("#course").val(),
         success: function(html) {
             $("#student").html(html);
         }
     });
 });
});
</script>

Config_db.php已经过测试并且工作得非常顺利。

Get_students.php 也可以正常工作，并将从测试数据库生成以下输出:

<option value='1'>John Doe</option><option value='2'>Jane Doe</option>

我做了一个测试，删除一开始的 jQuery mobile 行就可以解决问题。不幸的是，我确实需要 jQuery mobile。

Answer 1

JQuery mobile 不仅重新设置了选择框的主题，还添加了自己的复杂标记。您需要告诉 jQuery Mobile 更新它(移动显示)。

<script type="text/javascript">
$(function() {
 $("#course").bind("change", function() {
     $.ajax({
         type: "GET", 
         url: "get_students.php",
         data: "course="+$("#course").val(),
         success: function(html) {
             $("#student").html(html).selectmenu('refresh', true);
         }
     });
 });
});
</script>