实现点击展开城市列表特效/红叉关闭选项

一个做后端的简单写了两个特效 第一个是列表展开选择切换，第二个是选项栏红叉关闭
必须***引入js插件*** 我用的是jquery-1.8.3.min.js
####切换城市
展开效果图：

前端代码显示
利用city_id进行后台数据的处理 利用city_ids来进行页面的展示

<!-- 切换城市 -->
<div class="dialog changecity" style="width: 840px;height: 500px; overflow: auto; top:100px;display: none;">
    <div class="buttons" style="margin-top: 20px;margin-bottom: 20px;">
    <input type="button" id="pup_close" class="formsubmit" value="关闭" /> 
    <input type="button" id="pup_submit" class="formsubmit" value="完成" />
    <input type="button" id="pup_clear" class="formsubmit" value="取消所选" />
    </div>
    <!--div class="title">选择其他</div-->
    <div class="city_show">
        <{foreach from=$city_list_info item=city key=k}> 
            <dl>
                <dt><{$k}></dt>
                <dd name="proCity" class="cityList">
                    <{foreach from=$city item=citys}>
                       <input citynames="<{$citys.city_name}>" name="city_name" id="city_name" type="checkbox" value="<{$citys.city_id}>" 
                       <{foreach from=$params['city_ids'] item =vas}> 
                       <{if $vas == $citys['city_id']}>checked="checked"<{/if}> 
                       <{/foreach}>>
                       <{$citys.city_name}>
                   <{/foreach}>
                </dd>
            </dl>
        <{/foreach}>        
    </div>
</div>

  <input id="city_click"  type="button" value="<{if $params['city_name']}><{$params['city_name']}><{else}>切换城市<{/if}>" name="city_name" class="formsubmit"/>
  <div id="cityhide" style="display:none;"><{$params['city_name']}></div>
  <input id="hide_city" type="hidden" value="<{$params['city_id']}>" name="city_id" />
  <input id="hide_cityname" type="hidden" value="<{$params['city_name']}>" name="city_name" />

*特效CSS

//按钮特效
.formsubmit {
    background-color: #00327b; color: #fff;cursor: pointer;height: 30px;
    /*margin:0 5px;*/ border: medium none;padding: 0 20px;line-height: 30px;
    font-size: 12px;margin: 3px 0;}
.formsubmit{min-width: 85px;height: 32px;line-height: 32px;background-color: #4198ca;border-radius: 4px;}

效果图
鼠标移入前：超出的用省略号代替

鼠标移入后：全部展开

JQ表单提交
注释：点击切换城市 会弹出一个框，城市列表。进行选择限制选择城市的个数，以及将CheckBox复选框checked的数据

$(document).ready(function(){
    $("#city_click").click(function(){
        $(".changecity").slideToggle();
    });
    $("#pup_close").click(function(){
        $(".changecity").slideToggle();
    });

    $("#pup_submit").click(function(){
        if($("input[name='city_name']:checked").length >5) {
            alert('只允许选择几个城池');
            return false;
        }else{
            var checkID = [];//定义一个空数组
            var checkName = [];
            $("input[name='city_name']:checked").each(function(i){//把所有被选中的复选框的值存入数组
                checkName[i] = $(this).attr('citynames');
            });
            $("input[name='city_name']:checked").each(function(i){//把所有被选中的复选框的值存入数组
                checkID[i] =$(this).val();
            });
            if(checkName == ''){
                $("#city_click").val('切换城市');
            }else{
                $("#city_click").val(checkName);
            }
            $("#hide_city").val(checkID);
            $("#hide_cityname").val(checkName);
            $(".changecity").slideToggle();
        }
    });
 });

/**超出隐藏**/
$(document).ready(function(){
	//超出隐藏
    $("#city_click").css("cssText", "max-width: 130px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;");
    $("#city_click").mouseover(function(){
        $("#city_click").css("cssText", " white-space: nowrap; overflow: hidden; text-overflow: ellipsis;");        
    });
    $("#city_click").mouseout(function(){
         $("#city_click").css("cssText", "max-width: 130px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;");
    });
});

PHP后台代码 部分
city_id 数据格式：

city_ids数据格式：

//接收表单参数
$array = $this->getRequest()->getParams();
//接收到表单传递过来city_id数组进行打散 二维数组格式
$params['city_ids'] = empty($array['city_id']) ? '' : explode(",",$array['city_id']);
//处理数据 city_id 进行sql语句查询 逗号隔开的形式
$params["city_id"] = empty($array) ? '' :$array['city_id'] ;
//返回对应数组的city_ids前端进行展示
$this->getView()->assign('params', $params);        

####红叉效果
直接上代码来看
效果图：

html代码
首先设计一个符合页面的红色X

<div class="city_empty" style="position:absolute; top:0px; right:7px; width:14px;height:14px;line-height:12px;text-align:center;font-size:12px;color:#fff;border-radius:50%; background:red;cursor:pointer;">×</div>

JQ样式
保证关掉红叉切换到空白 清空对应的id或者数据

$(document).ready(function(){
    if($('#city_click').val() == '切换其他'){
        $(".city_empty").hide();
    }else{
        $(".city_empty").show();
    }
    $(".city_empty").click(function(){
        $(this).hide();
        $('#city_click').val('切换其他');
        $("#hide_city").val('');
        $("#hide_cityname").val('');
        $("#frm").submit();
    });
)};