0

作業中の Web サイトの「出席者の選択」リストで作業しようとしていますが、行き詰まるところまで来ました。

現時点でできることは、ドロップダウン リストからオプションを選択することです。これにより、名前が表示され、入力フィールドにこれらの値が入力されます (後でこれらの値をデータベースにポストするために使用します)。

私が抱えている問題は、リストから名前を削除するときに、フィールド値からも削除されないことです。

基本的に、名前の1つを削除すると、その値がフォームから取り除かれvalue、追加さ;れたものも削除されます。

JSフィドル

HTML

<select name="attendees" class="attendees">
  <option value="" disabled="disabled" selected="selected">Please Select Attendees</option>
  <option value="12" class="12">Name 1</option>
  <option value="13" class="13">Name 2</option>
  <option value="14" class="14">Name 3</option>
</select>

<div class="attendeesList" style="width: 370px;">
  <input type="text" name="theAttendees" class="theAttendees" value="" style="width: 370px;" />
</div>

jQuery 

(function($) {
    $('.attendees').change(
    function() {
        var theSelect = $('.attendees option:selected');
            getName = theSelect.text();
            getClass = theSelect.val();
            theAttendees = $('input.theAttendees').val();
        
        if (theSelect.hasClass('noMore')) {
            $('span.'+ getClass).animate({"color":"red"}, 100);
            setTimeout(function() {$('span.'+ getClass).animate({"color":"#000"}, 500)}, 1000) ;
        } else {
            $('.attendeesList').append('<span class="'+ getClass +'">' + getName + '<a href="#" id="d" class="'+getClass+'"><img src="images/iconDelete.png" style="float:right"></a></span><br class="'+ getClass +'"/>');
            theSelect.addClass('noMore');
            $('input.theAttendees').val(theAttendees + ' ' + getName + ';');
        }
    });
}(jQuery)); 

(function($) {
    $('div.attendeesList').on('click', 'a#d', function() {
        var hrefSpan = $(this).parent();
            classID = $(this).attr('class');
            getName = $('.attendees option.'+ classID).text();
            
            hrefSpan.remove();
            
            $('br.'+ classID).remove();
            
            if ($('.attendees option.'+ classID).hasClass('noMore')) {
                $('.attendees option.'+ classID).removeClass('noMore');
            }
    });
}(jQuery));

これはおそらく最も読みやすいコードではなく、おそらく可能な限り優れたコードではないことを理解していますが、私はjQueryを学習しており、可能な限り使用しようとしています。これは機能的であるため、改善に取り組むことができます.一度それが動作します。私のコードを最適化できる場所を教えていただけると幸いです。

ありがとう！

4

3 に答える 3

1

これは自分で考え出しました（いくつかの調査で！）

var values = attendeeBox.val().split(";");
var newValue = "";
for ( var i = 0 ; i < values.length ; i++ )
{
if ( getName != values[i] )
    {
        newValue = newValue + values[i] + ";";
    }
}
attendeeBox.val( newValue );
于 2012-09-17T10:36:57.310 に答える
0

最も簡単なのは、選択内容を配列に格納し、その配列からテキストボックスの値を作成することです。（array.join（';'）を使用）

于 2012-09-17T09:58:12.367 に答える
0

さて、ここにトリックがあります

  1. 削除する前に、テキスト フィールドにテキストを保存します
  2. a.replace()を実行して、リストで削除したテキストを削除し、別の変数に保存します
  3. 次に、テキストフィールドに保存された変数値を設定します
于 2012-09-17T10:00:52.150 に答える