0

ユーザーがオートコンプリートから 4 つの名前を選択し、そのうちの 1 つをプライマリ ネームとして指定できるようにする必要があります。フォームを送信するときは、サーバーから 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);
    }
});
4

2 に答える 2

0

私の質問に答えてすみません。

解決策をありがとうございました。フィドラーでいくつかのコードを試してみましたが、いくつかの依存関係のために機能させることができませんでした。しかし、要件とこれまでに行ったことを段階的に説明しようと思います。

  1. ユーザーは、オートコンプリートでエージェント名を検索し、[追加] をクリックできる必要があります。オートコンプリートは、サーバーに対して Ajax 呼び出しを行って、名前と一意の ID を取得しています。
  2. 最大4つ、最小1つの追加を許可する必要があります。追加された名前を削除できる必要があります（間違って名前を追加した場合にのみ）
  3. 現在、私はappenTo関数を使用しており、選択した値で入力ボックスを4回動的に作成しています。入力名 = Agent + indexValue 例: Agent1、Agent2Agent3、および Agent4。
  4. これらの名前の 1 つをプライマリとして選択するオプションを提供する必要があります。テキスト ボックスの横にラジオ ボタンを追加することを考えました。
  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();
    }
})
于 2013-08-29T21:12:11.250 に答える
0

このセレクターを使用して、選択されていないアイテムを取得すると、次のように実行できます。

$(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/

于 2013-08-29T19:45:14.920 に答える