Question

我正在尝试为我正在制作的网站选择“选择与会者”列表，并且已经达到了我陷入困境的程度。

目前，你可以做的是从下拉列表中选择选项，它将显示名称并使用这些值填充输入字段（稍后我将使用这些值将这些值发布到数据库）。

我遇到的问题是，当从列表中删除名称时，它也不会从字段值中删除。

基本上，当您删除其中一个名称时，我希望它从表单value中取出该值，并将附加的;删除。

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并试图尽可能多地使用它，这很有用，所以我可以工作一旦它工作，改善它。如果您想让我知道我的代码可以优化的地方，我也会很感激！

谢谢！

Answer 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 );

Answer 2

最简单的方法是将您的选择存储在数组中，并从该数组中构建文本框值。（使用array.join（';'））

Answer 3

好的，这就是诀窍

在文本字段中保存文本
执行.replace()删除列表中删除的文本并将其保存到其他变量
然后在文本字段

jQuery - 从Form Value中删除部分字符串

3 个答案: