Creating dynamic table with "dropdown multiselect checkbox" (jquery)

Question

I am populating a dynamic table in my jsp page. I want to have one column as "dropdown multiselect checkbox" . To create "dropdown multiselect checkbox" i am using (jquery+bootstrap).But only first row is getting created with multiselectCheckbox, other rows are coming as normal select option.

Here is the code :-

<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>

I know its happening because select id should be unique for each row , but now sure how to resolve it.

Use a common class. Add a class to your select then you can use class selector — Satpal
– Satpal, Commented Dec 24, 2014 at 9:03
thanks Satpal for suggestion but i am not sure how to make a call to jquery function in that case. — harpal18
– harpal18, Commented Dec 24, 2014 at 9:10

Satpal · Accepted Answer · 2014-12-24 09:11:38Z

1

Use a common class. Add a class to your select then you can use Class Selector (“.class”)

HTML:

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

Script:

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

answered Dec 24, 2014 at 9:11

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Balchandani · Accepted Answer · 2014-12-24 09:12:56Z

Try below code

<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>

just replace with yourclass with any css class name you like

Collectives™ on Stack Overflow

Creating dynamic table with "dropdown multiselect checkbox" (jquery)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related