根据表格中的选中项目从选择列表中删除项目

时间:2011-06-15 13:19:26

标签: jquery list select html-table

我有一个结构类似于以下结构的表:

<tbody>
    <tr class="classRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
        <td width="35px"><a class="classEditLink" name="33" href="#">Edit</a></td>
        <td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="33" /></td>
        <td>CLASS1234</td>
        <td>A Sample Class</td>
    </tr>
    <tr class="classDocsRow">
        <td></td>
        <td align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="38-33" /></td>
        <td width="245px">Document 1</td>
        <td width="600px">A Sample Document</td>
    </tr>
</tbody>
<tbody>
    <tr class="classRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
        <td width="35px"><a class="classEditLink" name="45" href="#">Edit</a></td>
        <td width="20px"><input type="checkbox" class="chkDeleteClass" name="deleteClasses[]" value="45" /></td>
        <td>CLASS987</td>
        <td>Another Sample Class</td>
    </tr>
    <tr class="classDocsRow noDocs">
        <td colspan="4">
            <strong>No documents are currently associated with this class.</strong>
        </td>
    </tr>
</tbody>

我还有一个如下所示的下拉列表:

<select type="select" id="classesList" name="classesList">
    <option id="defaultClassesListItem" value="0">Select a Class...</option>
    <option value="33">CLASS1234 - A Sample Class</option>
    <option value="45">CLASS987 - Another Sample Class</option> 
</select>

如您所见,下拉列表是表格中的类列表。

使用jQuery,我需要从表格中检查的下拉列表中删除任何项目。

我在网站的其他地方有一个选择器,可以找到表格中的选中项目,如下所示:

$('#classesTable input[name="deleteClasses[]"]:checked')

所以我认为这是一个起点。我假设我需要做一些事情,比如获取已检查项目的名称值(这是类的ID),并在下拉列表中找到并根据该项删除项目。我怎么能这样做?

2 个答案:

答案 0 :(得分:1)

为了删除项目,您应该执行以下操作:

删除选项:

 $("#classesList option[value='33']").remove();

$('#classesTable input[name="deleteClasses[]"]:checked').each(function(){
   get values to remove and delete throught something like $(this).val()
   $("#classesList option[value='values']").remove();
});

答案 1 :(得分:0)

以下是删除已检查项目的代码:

function submitForm() {
    var submitForm = false;
    $( '.cb-element' ).each(function () {
        if($(this).is(':checked')){
            submitForm = true;
        }
    });
    if(submitForm){
        if (confirm("Are you sure you want to delete")) {
            document.forms["myform"].submit();
        } else {
            return false;
        }
    } else {
        alert('Please select an email to delete!');
    }
}