0

我有一个包含下拉列表的页面。options 元素包含值的 id。在更改时，我发布并执行 sql qry 以获取与选项值匹配的所有项目 ID。然后我想将选中的属性添加到匹配的复选框中。如果这是有道理的。

我的选择列表： value 属性是 collection_id

<select required="" name="groupSelectList" id="groupSelectList">
    <option value="#">Group…&lt;/option>
    <option value="1">guest: The default group. Users that have not registered</option>
    <option value="2">customer: The default group for users that are customers and have an account</option>
    <option value="3">support: The default group for users of type Support</option>
    <option value="4">site_admin: The site administrator</option>
    <option value="5">support_admin: For the Support department Manager, VP etc.</option>
    <option value="26">testing group 2: This is another disposable group made just for testing</option>
    <option value="25">testing group 1: This is a disposable group. Group #1</option>
    <option value="24">test43: test43 description</option>
    <option value="23">test from new page: testing group to be deleted</option>
</select>

我的复选框： rel/value 属性是 permission_id 的

<ul class="four_up tiles">
    <li class="tile field">
        <label for="delete" class="checkbox">
            <input type="checkbox" rel="1" value="1" id="delete" class="cb" name="checkbox">
            <span></span> delete</label>
    </li>
    <li class="tile field">
        <label for="administrate" class="checkbox">
            <input type="checkbox" rel="2" value="2" id="administrate" class="cb" name="checkbox">
            <span></span> administrate
        </label>
    </li>
    <li class="tile field">
        <label for="view" class="checkbox checked">
            <input type="checkbox" rel="3" value="3" id="view" class="cb" name="checkbox">
            <span><i class="icon-check"></i></span> view
        </label>
    </li>
    <li class="tile field">
        <label for="edit" class="checkbox">
            <input type="checkbox" rel="4" value="4" id="edit" class="cb" name="checkbox">
            <span></span> edit
        </label>
    </li>
    <li class="tile field">
        <label for="create" class="checkbox checked">
            <input type="checkbox" rel="5" value="5" id="create" class="cb" name="checkbox">
            <span><i class="icon-check"></i></span> create
        </label>
    </li>
    <li class="tile field">
        <label for="Test23" class="checkbox checked">
            <input type="checkbox" rel="6" value="6" id="Test23" class="cb" name="checkbox">
            <span><i class="icon-check"></i></span> Test23
        </label>
    </li>
    <li class="tile field">
        <label for="testing24" class="checkbox">
            <input type="checkbox" rel="7" value="7" id="testing24" class="cb" name="checkbox">
            <span></span> testing24
        </label>
    </li>
    <li class="tile field">
        <label for="todays editor" class="checkbox">
            <input type="checkbox" rel="8" value="8" id="todays editor" class="cb" name="checkbox">
            <span></span> todays editor
        </label>
    </li>
    <li class="tile field">
        <label for="perm name here" class="checkbox">
            <input type="checkbox" rel="9" value="9" id="perm name here" class="cb" name="checkbox">
            <span></span> perm name here
        </label>
    </li>
    <li class="tile field">
        <label for="yada ydada ydada" class="checkbox">
            <input type="checkbox" rel="10" value="10" id="yada ydada ydada" class="cb" name="checkbox">
            <span></span> yada ydada ydada
        </label>
    </li>
    <li class="tile field">
        <label for="test46" class="checkbox">
            <input type="checkbox" rel="11" value="11" id="test46" class="cb" name="checkbox">
            <span></span> test46</label>
    </li>
</ul>

和jQuery：

// set checks on permissions fieldset
    $("#groupSelectList").on('change', function() {
        var slct = $(this).val();
        //alert(slct);
        $.ajax({
            type: 'post',
            url: 'ajax-processing.php',
            data: {gid: slct, d: 'yes'},
            dataType: 'json',
            success: function(data) {
                var mssg = data.msg;
                var list = mssg.replace(/^-|-$/g,'');
                var itemArr = list.split('-');
                for(var i = 1; i < itemArr.length; i++) {
                    //alert("input[rel='"+[i]+"']");
                    $("input[name='checkbox']").each(function() {
                        if($(this).attr("rel") === [i]) {
                            $("input[rel='"+[i]+"']").attr("checked","checked");
                        }
                    });
                }
                //$("<p class='alert info'>"+data.msg+" cleaned = "+list+"</p>").prependTo("#setPermsToSelectedGroup_");    
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $("<p class='alert danger'><i class='entypo icn-thumbs-down'></i>"+errorThrown+"</p>").prependTo("#setPermsToSelectedGroup_");
            }
        });
    });

我的 MySQL 查询基于包含 2 个 id 的 collection_id 和 permission_id 的查找表返回一个“-”分隔的 permission_id 列表。然后权限 ids 列表由 Javascript split() 拆分，然后我尝试遍历所有复选框以从 rel 或 value 的复选框属性中找到匹配项，这两种方法都可以 - 此时我想将属性checked=checked 设置为相应的复选框。我认为我的 jQuery 是错误的。我知道更改时的选择正在工作，我的 MySql 运行并且返回的值正是我所期望的。任何帮助将不胜感激。

和回应：

{"error":false,"msg":"5-4-3-2-1-"}

使用评论中建议的选择器和我在这里的一些重新思考是我最终得到的解决方案。后续解释：

for(var i = 0; i < itemArr.length; i++) {
    $("input[name='checkbox']").each(function() {
        if($(this).attr("rel") === itemArr[i]) {
            var targ = $(".cb[rel='"+itemArr[i]+"']").next();
            $("<i class='entypo icon-check'></i>").appendTo(targ);
            $(".cb[rel='"+itemArr[i]+"']").parent("label").addClass("checked");
        }
    });
}

现在告白。不需要添加该属性我需要使用选中的图标附加兄弟跨度，因为我使用的是 Gumby css 框架，这就是处理样式复选框的方式。所以使用正确的选择器我能够解决这个问题谢谢大家

4

1 回答 1

1

问题在于选择器的创建。您正在使用for循环的索引，而不是与该索引匹配的数组元素。在新数组循环的每次循环中循环遍历每个复选框也是多余的

这应该工作

for(var i = 1; i < itemArr.length; i++) {             
       $(".cb[rel="+ itemArr[i] +"]").prop('checked', true);       
 }
于 2014-07-17T23:35:02.970 回答