在jQueryMobile选择中自动填充

Auto populate in jQueryMobile select

本文关键字：填充 jQueryMobile 选择      更新时间：2023-09-26

我想知道我不能从网络上获得任何有价值的资源。我对下面的选择选项进行了编码，并坚持在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

不幸的是，代码中的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/

附言：如果你来自.net背景，请随时请求我帮助制作服务器端代码：）

相关文章：