复选框上的复杂过滤单击jQuery

时间:2016-06-06 14:25:19

标签: javascript php jquery html

我基本上有两个表,我需要像这样过滤:

Table 1 : Users
Table 2 : BrandUsers

现在我制作了以下HTML:

<div class="pop-us">
        <div class="pop-j">
            <div class="pop-journey">
                <?php  foreach($users as $user) {?>
                    <div class="pop-first-btn"><input class="check-user" type="checkbox" name="" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>
                <?php } ?>
            </div>
        </div>
        <div class="pop-city">
            <div class="pop-txt"><?=$this->translate('Please choose a user.')?></div>
            <!-- city -->

            <?php for ($i = 0; $i < count($states); $i++) { ?>
                <div class="pop-city-co">
                    <?php for ($j = 0; $j < count($states[$i]['citys']); $j++) { ?>
                        <label><input class="check-city" type="checkbox" name="" value="<?=$states[$i]['citys'][$j]['cityId']?>" data-id="<?=$i ?>"><?=$states[$i]['citys'][$j]['cityName']?></label>
                    <?php  } ?>
                </div>
            <?php  } ?>
        </div>
        <div class="modal-footer pop-footer">
            <button type="button" class="btn btn-default pop-close-us">Close</button>
            <button type="button" class="btn btn-primary pop-save-us">Save</button>
        </div>
    </div>

模态弹出窗口的左侧部分列出了所有用户...现在我的愿望是当在左侧点击每个复选框时,我想将UserId的值传递给函数并将其传递给我的查询以搜索BrandUsers表...现在有两种类型的东西我想在我的模态弹出窗口中显示..

当用户点击1个用户时...所有品牌都列在右侧。在BrandUser表中存在usedId的品牌,我想在列表中检查它们,以及那些不存在的品牌,我只是想让它们不被检查......

如何在左侧选中复选框时创建一个事件,以便将参数UserId传递给DB,然后在模态弹出窗口的右侧显示一些内容?

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

点击此复选框。请注意,我添加了一个具有用户ID的data-id属性。

<div class="pop-first-btn"><input class="check-user" type="checkbox" name="" data-id="<?=$user['id'] ?>" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>

然后添加此项以将点击处理程序附加到所有复选框

$('.check-city').on('click',function() {
    var user_id = $(this).data('id);
    $.ajax({
        url: 'http://myserver.com/action' + 'user_id=' + user_id;
        success: function(data) {
           // Update modal popup with data
        }
    });
});

希望这有帮助。