0

我正在尝试为我正在开发的网站制作“选择与会者”列表，但已经到了卡住的地步。

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

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

基本上，当您删除其中一个名称时，我希望它从表单中取出该值，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 回答