javascript - 多选下拉框 js多值切换显示

Question

要实现如下效果：现实点击选项，让选项值切换显示在文本框中

现在的问题：

1.取消已经选择的选项，文本框中相应的值不能对应删除

2.当选择不限制是不能是其他选项隐藏

我的代码：

HTML

<p class="container state-logo">
    <p class="row">
       <p class="col-lg-3 nationalFlag"><img src="{{NationaFLAG}}" alt=""  class="img-responsive img-circle"></p>
       <p class="col-lg-9 information">
          <p class="info">那么多朋友，总有一个知你冷暖的</p>
          <p class="select-mod">
            <ul>
               <li>
                  <p class="option-tit option-tit-01">
                     <h3 class="option-tit-bg option-tit-bg-01">地主身份</h3>
                  </p>
                  <p class="option-list option-list-01">
                     <span>不限制</span>
                     <span>专业向导</span>
                     <span>非专业向导</span>
                  </p>
               </li>
               <li>
                  <p class="option-tit option-tit-02">
                     <H3 class="option-tit-bg option-tit-bg-02">地主性别</H3>
                  </p>
                  <p class="option-list option-list-02">
                     <span>不限制</span>
                     <span>男</span>
                     <span>女</span>
                  </p>
               </li>
               <li class="serve">
                  <p class="option-tit option-tit-03">
                     <H3 class="option-tit-bg option-tit-bg-03">地主服务</H3>
                  </p>
                  <p class="option-list option-list-03">
                     <span class="multiple noLimited">不限制</span>
                     <span class="multiple">带车向导</span>
                     <span class="multiple">徒步向导</span>
                     <span class="multiple">接送机</span>
                     <span class="multiple">自家住宿</span>
                     <span class="multiple">特色活动</span>
                  </p>
               </li>
               <li class="city">
                  <p class="option-tit option-tit-04">
                     <H3 class="option-tit-bg option-tit-bg-04">可导城市</H3>
                  </p>
                  <p class="option-list option-list-04">
                     <span class="multiple noLimited">不限制</span>
                     <span class="multiple">伦敦</span>
                     <span class="multiple">哈罗盖特</span>
                     <span class="multiple">布莱顿</span>
                     <span class="multiple">约克</span>
                     <span class="multiple">威尔士小镇</span>
                     <span class="multiple">切斯特</span>
                     <span class="multiple">苏格兰</span>
                     <span class="multiple">苏格兰</span>
                     <span class="multiple">其他</span>
                  </p>
               </li>
            </ul>
          </p>
       </p>
    </p>
</p>

CSS
.state-logo{ max-width: 980px; padding: 0; }
.state-logo .nationalFlag{ position: relative; top: -70px; width: 126px; height: 126px; padding: 0; z-index: 999;}
.state-logo .info{ height: 38px; line-height: 38px; margin-top: -43px; margin-left: -30px; padding-left: 40px; color: #faf4ed; background: url(../images/personalCenter/label-bg.png); border-radius: 0 20px 0 0;}
.state-logo .select-mod{ height: 38px; line-height: 38px; margin-left: -40px; padding-left: 45px; color: #faf4ed; background: #fff; border-radius: 0 0 20px 0; box-shadow: 0 0 3px 0 #d3cdc7;}
.state-logo .select-mod ul li{ display:inline-block;width: 100px;height:38px;float: left;color: #767571;}
.state-logo .select-mod ul li.serve,
.state-logo .select-mod ul li.city
{width: 245px;}
.state-logo .select-mod ul li h3{ font-size: 14px;height: 16px;line-height: 16px;margin-top: 11px;border-right: 1px dashed #767571;padding-left: 10px;cursor: pointer;background: url("../images/guiderList/arrow_bottom.png") no-repeat right center;}
.state-logo .select-mod ul li .option-list{ position: relative; z-index: 999;width: 100px;height: auto;border: 1px solid #000;margin-top: 11px;background-color: #fff;opacity: 0.9;padding: auto 10px;}
.state-logo .select-mod ul li .option-list span{display:block;height: 25px;line-height: 25px;font-size: 12px;background: url("../images/guiderList/no_select.png") no-repeat right center;}
.state-logo .select-mod ul li .option-list span.current{background: url("../images/guiderList/select.png") no-repeat right center;}

JS
/** 多选地主服务**/
var services = new Array();
$('.option-list-03').find('span').click(function () {
    //如何实现显示多选值
var current = $(this);
    var content = current.html();
    $(this).parent().prev().find("h3").contents().filter(function() {
        return this.nodeType == 3;
    }).wrap('<span style="color:blue;"></span>');
    console.log("content:"+content);
    services.push(content);
    var allcontent = services.join(" ");
    console.log(allcontent);
    //切换显示图标
if ($(this).attr('class') == 'multiple') {
        $(this).addClass('current');
        $(this).parent().prev().find("h3").html(allcontent);
    } else {
        $(this).removeClass('current');
        $(this).parent().prev().find("h3").contents().filter(function() {
            return this.nodeType == 3;
        }).wrap('<span style="color:blue;"></span>').empty();
    }
});
$(".noLimited").click(function(){
    $(this).attr('src', '../static3/images/guiderList/no_select.png');
});