使用 Ajax 和 PHP 在表单中更新 JQuery Mobile 选择菜单

Question

我正在使用涉及表单的 jQuery mobile 构建网站。

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

虽然我已经能够在我的 jQuery 移动网站之外执行此操作，但它似乎无法与 jQuery 移动一起使用。我设置了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>