Question

我可以使用以下方式遍历我选中的框

 $('#sel_driver_file_options :selected').each(function(i, selected) { 
                //console.log($(this).val());
                var driverName = $(this).val();
                var driverText = $(this).text();
                $("#tr_file_options_input").show();
                $("#span_" + driverName).show();
                $('<div id="desc_file_options_input_' + driverName + '">Enter a Value For ' + driverText + '</div>').prependTo($("#span_" + driverName));
            }); // end selected each

但是如何对'#sel_driver_file_options'中未选中的所有复选框执行操作？

我要做的是删除添加的内容：

$('<div id="desc_file_options_input_' + driverName + '">Enter a Value For ' + driverText + '</div>').prependTo($("#span_" + driverName));

当用户取消选择它时。否则，如果他们再次选择它，它会创建第二个。

修改：JSFiddle for the full block of code I am working on

Edit2：更新了JSFiddle，重新编写了表以便更好地组织，将close函数更改为：

close: function (event, ui) {
            $('#sel_driver_file_options :selected').each(function (i, selected) {
                var driverName = $(this).val();
                var driverText = $(this).text();
                var driverSpan = $("#span_" + driverName);
                var driverDesc = $("#desc_" + driverName);
                console.log("Selected = " + driverName);
                $("#tr_file_options_input").show();
                $(driverSpan).show();
                $(driverDesc).show();
            }); // end each selected
            $('#sel_driver_file_options').not(':selected').each(function () {
                //if ($('#sel_driver_file_options').not(':selected')) {
                var driverName = $(this).val();
                var driverText = $(this).text();
                var driverSpan = $("#span_" + driverName);
                var driverDesc = $("#desc_" + driverName);
                console.log("Not Selected = " + driverName);
                $(driverSpan).hide();
                $(driverDesc).hide();
                // driverSpan.find('[id^="desc_file_options_input_"]').remove();
            }); // end each not selected
            //$('#desc_file_options_input_' + driverName).remove();
        } //end close function

现在控制台显示：

Selected = default-priority
Not Selected = default-priority

好像not（'：selected'）不起作用？

Answer 1

我已经将选中的数据放入一个数组，然后再次运行.each并隐藏不在数组中的所有范围。它现在按预期工作。 Here's the JSFiddle for the working solution in case anyone needs it.

以下是相关代码：

$("#sel_driver_file_options").multiselect({
    show: ["blind", 200],
    hide: ["blind", 500],
    multiple: true,
    selectedList: 3,
    noneSelectedText: "Select file() options",
    open: function (event, ui) {
        // nothing for now
    },
    close: function (event, ui) {
        var arr = [];
        $('#sel_driver_file_options :selected').each(function (i, selected) {
            var driverName = $(this).val();
            var driverText = $(this).text();
            var driverSpan = $("#span_" + driverName);
            var driverDesc = $("#desc_" + driverName);
            arr.push(driverName);
            console.log("Selected = " + driverName);
            $("#tr_file_options_input").show();
            $(driverSpan).show();
            $(driverDesc).show();
        }); // end each selected
        // Now loop through all options and remove spans for unselected ones
        $('#sel_driver_file_options option').each(function () {
            var driverName = $(this).val();
            var driverText = $(this).text();
            var driverSpan = $("#span_" + driverName);
            var driverDesc = $("#desc_" + driverName);
            if ($.inArray(driverName, arr) == -1) {
                console.log("Not in array: " + driverName);
                $(driverSpan).hide();
                $(driverDesc).hide();
            }
        }); // end each not selected
    } //end close function
}); // end multiselect

Answer 2

这样的事情会起作用

$('#sel_driver_file_options').not(':selected');

JQuery - 为选定和未选中的复选框执行某些操作

2 个答案: