Question

我想我无法从网上获得任何有价值的资源。我编写了以下选择选项，并坚持使用Jquery mobile中第二个选择的新选项进行重建。我相信有人可以帮忙做到这一点。我非常感谢大家，希望能帮到我。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.css" />
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<link rel="stylesheet" href="custom.css" />

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

脚本

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#cat").selectmenu(); // Initializes
        $("#cat").selectmenu('refresh', true);
        $("#cat").change(function() {
            //document.write("asd");.selectmenu('refresh', true);
        $("#subcat").load("datadmin/getsub.php?cat="+ $("#cat").val());
        var myselect = $("#subcat");
        myselect[0].selectedIndex = 3;
        myselect.selectmenu("refresh");
        //$("#subcat").selectmenu('refresh', true);
        });         
    })
</script>

选择

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="cat" class="select">Category:</label>
<select name="cat" id="cat" data-mini="true">
<?php
    $q="select * from cat";
    $res=mysql_query($q);
    if(mysql_num_rows($res)>=1)
    {
        while ($info=mysql_fetch_array($res)) 
            {
        echo '<option value="'.$info['cid'].'">'.$info['cat'].'</option>';
        }
    }
    ?>
</select>
</div>

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="subcat" class="select">Sub Category:</label>
<select name="subcat" id="subcat" data-mini="true">
<?php
    $q="select * from subcat";
    $res=mysql_query($q);
    if(mysql_num_rows($res)>=1)
    {
        while ($info=mysql_fetch_array($res)) 
            {
        echo '<option value="'.$info['sid'].'">'.$info['subcat'].'</option>';
    }
    }   
?>
</select>
</div>

这是此代码的jsfiddle链接jsfiddle.net/abelkbil/wLC65

Answer 1

不幸的是，代码中的load方法无效，因为您的域中不包含该网址。这称为跨域调用，XMLHttpRequest不允许这种调用（后面是load所做的）。绕过此方法的一种方法是向服务器中的某个方法发出ajax请求，然后会话到此网址并从中获取数据。所以在你的change函数中，

 $("#cat").bind("change", function () {
        alert("change");
        //$("#subcat").load("http://fortunebitsolutions.com/olx/dataadmin/getsub.php?cat=" + $("#cat").val());<--This wont work.ajax doesnt allow cross domain requests

        //get a response from this url from your server, and make an ajax request to your server to get it from there.
       /* $.ajax({
                url: url to server method,
                data: { "cat": this.value },
                jsonp: true,
                success: function (s) {
                    //now s will contain options.
                    $options = s;
                },
                error: function (s) {
                    alert("error");
                }
            }); */

         //now add the options to second select
        $("#subcat").html($options).selectmenu().selectmenu('refresh', true);
    });

以下是离线示例的演示：http://jsfiddle.net/hungerpain/wLC65/1/

PS：如果您来自.net背景，请随时请求我帮助制作服务器端代码:)

自动填充jQueryMobile选择

1 个答案: