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

现在的问题：

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

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

我的代码：

HTML


    

       

       

          
那么多朋友，总有一个知你冷暖的
          

            

               

                  

                     
地主身份
                  

                  

                     不限制
                     专业向导
                     非专业向导
                  
               
               

                  

                     
地主性别
                  

                  

                     不限制
                     男
                     女
                  
               
               

                  

                     
地主服务
                  

                  

                     不限制
                     带车向导
                     徒步向导
                     接送机
                     自家住宿
                     特色活动
                  
               
               

                  

                     
可导城市
                  

                  

                     不限制
                     伦敦
                     哈罗盖特
                     布莱顿
                     约克
                     威尔士小镇
                     切斯特
                     苏格兰
                     苏格兰
                     其他
                  
               
            
          

       

    



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('');
    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('').empty();
    }
});
$(".noLimited").click(function(){
    $(this).attr('src', '../static3/images/guiderList/no_select.png');
});