用「dropdown multiselect」複選框創建動態表格（jquery）

我正在我的jsp頁面中填充動態表格。我想有一列作爲「下拉多選複選框」。要創建「dropdown multiselect」複選框，我正在使用（jquery + bootstrap）。但只有第一行使用multiselectCheckbox創建，其他行正在作爲普通選擇選項來使用。用「dropdown multiselect」複選框創建動態表格（jquery）

下面是代碼： -

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

我知道它的發生，因爲選擇ID應該是每行唯一的，但是現在知道如何解決它。

來源

2014-12-24 harpal18

使用的公共類。添加一個類到你的選擇，那麼你可以使用類選擇器 – Satpal

感謝Satpal的建議，但我不知道如何在這種情況下調用jquery函數。 – harpal18

使用普通的類。一類添加到您的選擇，那麼你可以使用Class Selector (「.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 
    }); 
});

來源

2014-12-24 09:11:38 Satpal

非常感謝Satpal，它的工作:)你節省了我的一天:) – harpal18

試試下面的代碼

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

來源

2014-12-24 09:12:56

只需要用你的課程替換你喜歡的任何css課程名稱 –

感謝Ashish的幫助 – harpal18

用「dropdown multiselect」複選框創建動態表格（jquery）

回答

相關問題