Question

我要求用户可以从自动填充中选择4个名称，并指定其中一个名称为主名称。在对表单进行分析时，我应该从服务器捕获所有4个值并确定哪个值是主要的。我打算使用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

很抱歉回答我的问题。

非常感谢你的解决方案。我尝试在fiddler中运行一些代码但是却无法通过某些依赖来获得它的功能。但我会尝试逐步解释要求以及到目前为止所做的工作。

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

我认为我需要的是创建一个多选真实的选择框，然后在单击添加代理按钮时添加选项框动态选项（跟踪4次）添加约翰道特马特该死的汤姆克鲁斯布拉德皮特通过所有最大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();
    }
})

可选择的非选定值

2 个答案: