multiselectbox中的复选框在这里onChange不起作用

时间:2013-02-13 05:35:11

标签: javascript html

我在这里面使用了一个多重选择器这个选择框我正在使用复选框更改此选择我想要执行一个函数名称getValue()。我试过这个,但对我来说它不起作用

以下是我的代码

 <html>
    <head>  
        <link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.css" />
        <link rel="stylesheet" type="text/css" href="demo.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.dropdownchecklist.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
               $("#cboLocation").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });
            });
            function getValue()
            {
                alert("hai");
                return false;
            }
        </script>
    </head>
    <body>

          <select name="cboLocation" class="width150" id="cboLocation" multiple="multiple" onChange="getValue()">
            <option>(all)</option>
            <option>Banana Nut</option>
            <option>Black Walnut</option>
            <option>Burgundy Cherry</option>
            <option>Butter Pecan</option>
            <option>Strawberry Cheesecake</option>
            <option>Turkish Coffee</option>
            <option>Vanilla</option>
          </select>

    </body>
    </html>

谢谢

1 个答案:

答案 0 :(得分:0)

我从选择菜单中删除了onChange事件,因为dropdownchecklist()会忽略它.Dropdownchecklist()正在用divsinputs替换你的select元素;因此,不会调用内联脚本。

以下代码做了一件事:当用户完成与下拉菜单的交互时,如果且仅当至少选中了一个复选框时,它们会显示警告消息“hai”。

<select name="cboLocation" class="width150" id="cboLocation" multiple="multiple">


$(document).ready(function() {
    $("#cboLocation").dropdownchecklist( {
        emptyText:'Select Something', // couldn't see the thing
        firstItemChecksAll: true,
        onComplete: function () { getValue() } //, alert('hello') }
    });

    function getValue() {
        if($('.ui-dropdownchecklist-item input:checked').length > 0) {
        alert('hai');
        }
    }       
});