可选择的非选定值

Question

我要求用户可以从自动完成中选择 4 个名称，并指定其中一个为主要名称。提交表单时，我应该从服务器捕获所有 4 个值并确定哪个是 primary 。我打算使用selectable widget。在下面的示例中，有什么方法可以将选定的值与其他未选定的值一起传递？这是小提琴示例 JSFIDDLE DEMO

$("#selectable").selectable({
    stop: function() {
        var items = '';
        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function() {
            var index = $("#selectable li").index(this);
            items += (" #" + (index + 1));
        });
        alert('You have selected: ' + items);
        $('input[name="horario"]').val(items);
    }
});

Answer 1

您可以执行以下操作，使用此选择器可以获得未选中的项目：

$(this).children().not(".ui-selected").each(function() {
                var index = $("#selectable li").index(this);
                items2 += (" #" + (index + 1));
            });

在元素上使用这个绑定，当你点击它时它会被取消选中，所以你不需要删除按钮图标：

.bind( "mousedown", function ( e ) {
        e.metaKey = true;
    } ).

代码：

$("#selectable").bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable({
    stop: function() {
        var items = '';
        var items2 = '';

        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function() {
            var index = $("#selectable li").index(this);
            items += (" #" + (index + 1));
        });
        $(this).children().not(".ui-selected").each(function() {
            var index = $("#selectable li").index(this);
            items2 += (" #" + (index + 1));
        });
        $('input[name="horario"]').val(items+"-->"+items2);
    }
});

演示：http://jsfiddle.net/IrvinDominin/bZKt6/

Answer 2

很抱歉回答我的问题。

非常感谢您的解决方案。我尝试在提琴手中使用一些代码，但由于某些依赖项而无法使其正常工作。但我会尝试一步一步地解释要求以及我到目前为止所做的工作。

1. 用户应该能够在自动完成中搜索代理名称并单击添加。自动完成功能正在向服务器发出 Ajax 调用以获取名称和唯一 ID。
2. 应该允许最多添加4个最小1个。应该可以删除添加的名称（如果他添加错误的名称只是错误）
3. 目前我正在使用appenTo 函数并动态创建具有选定值的输入框4 次。输入名称 = Agent + indexValue 例如：Agent1、Agent2Agent3 和 Agent4。
4. 需要提供一个选项来选择其中一个名称作为主要名称。考虑在文本框旁边添加一个单选按钮。
5. 我有一个提交按钮，可以将表单提交到服务器。我试图通过警报查看那些动态生成的输入字段值并获得未定义的值。 var agt1 =$("#Agent1").val(); 警报（agt1）； //未定义的错误。 即使我让它工作，输入值（例如：John Dow）也不是我想提交给服务器的东西，而是那个名字的 id。所以我决定输入框的想法是行不通的，然后尝试切换到可选择的小部件。但这里似乎我们也无法传递所选项目的 ID。

我认为我需要的是创建一个具有多选 true 的选择框，然后在单击添加代理按钮时向选择框动态添加选项（跟踪 4 次）添加 John Dow Matt Damn Tom Cruice Brad Pitt 最多通过 4选项值到服务器并指示选择了 25。

如果你有更好的选择，请告诉我，我想试试。谢谢。

http://jsfiddle.net/XYr3t/

if($('#container').find('.agent').length < 4) {
            var len = $('#container').find('.agent').length;
            var index = len+1;

$('#container').append('<div><label >Agent' +index+ '</label><input   class="agent" id ="Agent" '+ index +' name ="Agent" '+ index +' type="text" value ="'+agent+'"><span class="remove" ><div class="ui-state-default ui-corner-all"><span style="padding-left:3px" class="ui-icon ui-icon-minusthick"></span></div></span></div>');

            $( '[name=selectAgent]' ).val('');      
         }else{
        $.msgBox({
        title:"Agent Name",
        content:"You cannot add more than 4 Agents!"
    });
    }
})


 $('body').on('click', '.remove', function() {
    if($('#container').find('.agent').length > 0) {
     $(this).parent().remove();
    }
})