Question

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

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

虽然我已经能够在我的jQuery移动网站之外做到这一点，但它似乎与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移动行解决了问题。不幸的是，我确实需要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>

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

1 个答案: