jQuery移动翻转开关困难_Jquery_Asp.net_Jquery Mobile

jQuery移动翻转开关困难

jquery asp.net jquery-mobile

jQuery移动翻转开关困难,jquery,asp.net,jquery-mobile,Jquery,Asp.net,Jquery Mobile,谢谢你花时间回答我的问题我有以下代码标记+jquery代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

谢谢你花时间回答我的问题

我有以下代码标记+jquery代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div data-role="page" id="home" class="type-home">
            <div data-role="content">
                <div class="content-primary">
                    <p>
                        The flip toggle switch is displayed like this:</p>
                    <div data-role="fieldcontain">
                        <label for="slider">
                            Flip switch:</label>
                        <select name="slider" id="my-slider" data-role="slider">
                            <option id="firstOption" data-test="" data-status="deactivated" value="off">Activated</option>
                            <option id="secondOption" data-test="" data-status="activated" value="on">Deactivated</option>
                        </select>
                    </div>                
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        $(document).ready(function () {

            changeOption();

            $('#my-slider').bind('change', function () {

                var myswitch = $(this);

                if (myswitch.val() == 'on') {
                    alert('on');

                }
                else {
                    alert('off');
                }
            });
        });

        function changeOption() {
            var x = 1;

            if (x == 1) {
                $('#firstOption').attr('selected', 'selected').slider('refresh');
            }
            else {
                $('#secondOption').attr('selected', 'selected').slider('refresh');
            }
        }

    </script>



翻转切换开关显示如下：
翻转开关：
激活
解散
$（文档）.ready（函数（）{
changeOption（）；
$（“#我的滑块”）.bind（'change'，function（）{
var myswitch=$（此）；
如果（myswitch.val（）=='on'）{
警报（“开启”）；
}
否则{
警报（“关闭”）；
}
});
});
函数changeOption（）{
var x=1；
如果（x==1）{
$（'#firstOption'）.attr（'selected'，'selected'）.slider（'refresh'）；
}
否则{
$（'#secondOption'）.attr（'selected'，'selected'）.slider（'refresh'）；
}
}

当我单击翻转开关时，它执行jquery代码（两个警报）。但是，我希望能够基于web服务提供的值设置翻转开关的默认值（在本例中，我使用了一个虚拟值=>x）。但是，我无法选择第二个元素。。。它总是默认为“已激活”。有什么建议吗？多谢各位

据我所知，你的代码是说选择第一个（x总是1），第一个的文本是“激活的”。看起来它对我来说是有效的。我已经创建了一个JSFIDLE供您使用，其中X是随机的，在我看来很好。