![](/img/trans.png)
[英]issue while creating a dynamic dropdown box using multiselect jquery plugin
[英]Creating dynamic table with “dropdown multiselect checkbox” (jquery)
我在我的jsp页面中填充了一个动态表。 我想有一列作为“下拉多选复选框”。 要创建“下拉多选复选框”,我正在使用(jquery + bootstrap)。但是只有第一行是通过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对于每一行应该是唯一的,但是现在确定如何解决它。
使用一个普通的类。 将课程添加到您的选择中,然后可以使用课程选择器(“ .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
});
});
试试下面的代码
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.