javascript - 在 jQueryMobile 选择中自动填充

Question

我想知道我无法从网络上获得任何有值(value)的资源。我编写了以下选择选项，并坚持使用 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 方法不起作用，因为该 URL 不在您的域中。这称为跨域调用，XMLHttpRequest 不允许它(这是 load 在后面所做的)。绕过此问题的一种方法是向服务器中的方法发出 ajax 请求，该方法将与此 URL 进行对话并从那里获取数据。所以在你的 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 背景，请随时向我寻求帮助来制作服务器端代码:)