文章/答案/技术大牛

发布

社区首页 >问答首页 >使用“下拉多选复选框”创建动态表(jquery)

问使用“下拉多选复选框”创建动态表(jquery)
EN

Stack Overflow用户

提问于 2014-12-24 08:59:56

回答 2查看 5.8K关注 0票数 0

我正在jsp页面中填充一个动态表。我希望有一个列作为“下拉多选复选框”。要创建“下拉多选中复选框”，我使用的是(jquery+bootstrap).But --只有第一行是用multiselectCheckbox创建的，其他行将以正常选择选项的形式出现。

这是密码:-

<html><head>
<script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css"
    type="text/css">
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
     $(document).ready(function() {
           $("#myselect").multiselect({
            includeSelectAllOption: true
});

});

</script>
</head>
<body>
<Table name="test" border="1">
            <TR bgcolor="#33FFFF">
                <td>ManagementIPAddress</td>
                <td>Application name</td>
            </TR>
            <c:forEach var="resultMap" items="${requestScope.snmpGetResultsMap}">
                <TR>
                    <TD><c:out value="${resultMap.key}" /></TD>
                    <TD><select id="myselect" multiple="multiple">
                            <option value="checkbox-1">checkbox-1</option>
                            <option value="checkbox-2">checkbox-2</option>
                            <option value="checkbox-3">checkbox-3</option>
                            <option value="checkbox-4">checkbox-4</option>
                            <option value="checkbox-5">checkbox-5</option>
                            <option value="checkbox-6">checkbox-6</option>
                    </select><br />
                    <br /></TD>
                </TR>
            </c:forEach>
        </Table>
</body></head></html>

我知道它的发生，因为select id对于每一行都应该是唯一的，但是现在确定了如何解决它。

javascript

jquery

twitter-bootstrap

checkbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-12-24 09:11:38

使用一个普通的类。将类添加到选择中，然后可以使用类选择器(“.class”)

HTML：

<select class="mySelectClass" multiple="multiple">
        <option value="checkbox-1">checkbox-1</option>
        <option value="checkbox-2">checkbox-2</option>
</select>

剧本：

 $(document).ready(function() {
    $(".mySelectClass").multiselect({
        includeSelectAllOption: true
    });
});

票数 1

Stack Overflow用户

发布于 2014-12-24 09:12:56

试试下面的代码

<html><head>
<script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css"
    type="text/css">
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
     $(document).ready(function() {
           $(".yourClass").each(function(){
$(this).multiselect({
            includeSelectAllOption: true
});
});

});

</script>
</head>
<body>
<Table name="test" border="1">
            <TR bgcolor="#33FFFF">
                <td>ManagementIPAddress</td>
                <td>Application name</td>
            </TR>
            <c:forEach var="resultMap" items="${requestScope.snmpGetResultsMap}">
                <TR>
                    <TD><c:out value="${resultMap.key}" /></TD>
                    <TD><select class="yourClass" multiple="multiple">
                            <option value="checkbox-1">checkbox-1</option>
                            <option value="checkbox-2">checkbox-2</option>
                            <option value="checkbox-3">checkbox-3</option>
                            <option value="checkbox-4">checkbox-4</option>
                            <option value="checkbox-5">checkbox-5</option>
                            <option value="checkbox-6">checkbox-6</option>
                    </select><br />
                    <br /></TD>
                </TR>
            </c:forEach>
        </Table>
</body></head></html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27634193

复制

相似问题

问使用“下拉多选复选框”创建动态表(jquery)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用“下拉多选复选框”创建动态表(jquery)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用“下拉多选复选框”创建动态表(jquery)
EN