shiziyu18/Themes/Seller/Shipping/selectareas.html

<style type='text/css'>
    .province { float:left; position:relative;width:170px; height:35px; line-height:35px;border:1px solid #fff;padding-top: -10px}
    .province:hover { border:1px solid #a6d2fe;border-bottom:1px solid #a6d2fe; background:#edf6ff;}
    .province .cityall { margin-top:10px;}
    .province ul { list-style: outside none none;position:absolute;padding:0;background:#edf6ff;border:1px solid #a6d2fe;display:none;
    width:auto; width:250px; z-index:999999;left:-1px;top:32px;}
    .province ul li  { float:left;min-width:60px;margin-left:20px; height:30px;line-height:30px; }
    .checkbox-inline{
        margin: 0;
    }
 </style>
 <div id="modal-areas"  class="modal fade" tabindex="-1">
    <div class="modal-dialog" style='width: 900px;'>
        <div class="modal-content">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择区域</h3></div>
            <div class="modal-body" style='' >
				<div class="row show_type_1">
					<div class="col-sm-6 col-xs-12">
						<b class="frist-title help-block">首重(克) ：</b> 
						<input name="frist" value="1" step="1" type="number" class="form-control mb-3 frist">
					</div> 
					<div class="col-sm-6 col-xs-12">
						<b class="frist-price-title help-block">首费(元) ：</b> 
						<input name="frist_price" placeholder="默认0" value="0" step="1" type="number" class="form-control mb-3 frist_price">
					</div>
				</div>
				<div class="row show_type_1">
					<div class="col-sm-6 col-xs-12">
						<b class="second-title help-block">续重(克) ：</b> 
						<input name="second" placeholder="默认0" value="1" step="1" type="number" class="form-control mb-3 second">
					</div> 
					<div class="col-sm-6 col-xs-12">
						<b class="second-price-title help-block">续费（元）：</b> 
						<input name="second_price" placeholder="默认0" value="0" step="1" type="number" class="form-control mb-3 second_price">
					</div>
				</div>
				
				<div class="row show_type_2" style="display:none;">
					<div class="col-sm-6 col-xs-12">
						<b class="frist-title">首件(个)  ：</b> 
						<input name="frist" value="1" step="1" type="number"  class="form-control mb-3 frist">
					</div> 
					<div class="col-sm-6 col-xs-12">
						<b class="frist-price-title">运费(元) ：</b> 
						<input name="frist_price" placeholder="默认0" value="0" step="1" type="number" class="form-control mb-3 frist_price">
					</div>
				</div>
				<div class="row show_type_2" style="display:none;">
					<div class="col-sm-6 col-xs-12">
						<b class="second-title">续件(个) ：</b> 
						<input name="second" placeholder="默认0" value="1" step="1" type="number" class="form-control mb-3 second">
					</div> 
					<div class="col-sm-6 col-xs-12">
						<b class="second-price-title">续费（元）：</b> 
						<input name="second_price" placeholder="默认0" value="0" step="1" type="number" class="form-control mb-3 second_price">
					</div>
				</div>
				
			
                <?php foreach( $areas['province'] as  $value  ){ ?>
				<?php if( $value['@attributes']['name']=='请选择省份'){ ?>{php continue;}<?php } ?>
                <div class='province'>
                     <label class='checkbox-inline' style='margin-left:20px;padding: 0 0 5px 24px;'>
                         <input type='checkbox' class='cityall' style="margin-top: -10px" / > {php echo $value['@attributes']['name']}
                         <span class="citycount" style='color:#ff6600'></span>
                     </label>
                    <?php if( count($value['city'])>0){ ?>
                    <ul style="padding-bottom: 15px;">
                        <?php foreach( $value['city'] as  $c  ){ ?>
                        <li>
                             <label class='checkbox-inline' >
                                  <input type='checkbox' class='city' style='margin-top:-3px;' code="{php echo $c['@attributes']['code']}" city="{php echo $c['@attributes']['name']}" /> {php echo $c['@attributes']['name']}
                            </label>
                     </li>
                        <?php } ?>
                    </ul>
                    <?php } ?>
                </div>
                <?php } ?>
				<div style="clear:both;"></div>
            </div>
            <div class="modal-footer">
                <a href="javascript:;" id='btnSubmitArea' class="btn btn-primary" data-dismiss="modal" aria-hidden="true">确定</a>
                <a href="javascript:;" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
     </div>
</div> 
 <script language='javascript'>
    $(function(){
   
        $('.province').mouseenter(function(){
              $(this).find('ul').show();
        }).mouseleave(function(){
              $(this).find('ul').hide();
        });
        
        $('.cityall').click(function(){
            var checked = $(this).get(0).checked;
            var citys = $(this).parent().parent().find('.city');
            citys.each(function(){
                $(this).get(0).checked = checked;
            });
            var count = 0;
            if(checked){
                count =  $(this).parent().parent().find('.city:checked').length;
            }
            if(count>0){
               $(this).next().html("(" + count + ")")    ;
            }
            else{
                $(this).next().html("");
            }
        });
        $('.city').click(function(){
            var checked = $(this).get(0).checked;
            var cityall = $(this).parent().parent().parent().parent().find('.cityall');
          
            if(checked){
                cityall.get(0).checked = true;
            }
            var count = cityall.parent().parent().find('.city:checked').length;
            if(count>0){
               cityall.next().html("(" + count + ")")    ;
            }
            else{
                cityall.next().html("");
            }
        });    
      
    });
    
     function clearSelects(){
         $('.city').attr('checked',false).removeAttr('disabled');
         $('.cityall').attr('checked',false).removeAttr('disabled');
         $('.citycount').html('');
    }
      function editArea(btn){
        current = $(btn).attr('random');
        clearSelects();
        var old_citys = $(btn).prev().val().split(';');
      
                
        $('.city').each(function(){
            var parentcheck = false;
            for(var i in old_citys){
                if(old_citys[i]==$(this).attr('city')){
                    parentcheck = true;
                    $(this).get(0).checked = true;
                    break;
                }
            }
            if(parentcheck){
                $(this).parent().parent().parent().parent().find('.cityall').get(0).checked=  true;
            }
        });
        
        $("#modal-areas").modal();
        var citystrs = '';
        $('#btnSubmitArea').unbind('click').click(function(){
                   $('.city:checked').each(function(){              
                     citystrs+= $(this).attr('city') +";";
                   });
                   $('.' + current + ' .cityshtml').html(citystrs);
                   $('.' + current + ' .citys').val(citystrs);
				   console.log(2);
        })
           var currents = getCurrents(current);
                currents = currents.split(';');
                var citys = "";
                $('.city').each(function(){
                    var parentdisabled =false;
                    for(var i in currents){
                        if(currents[i]!='' && currents[i]==$(this).attr('city')){
                            $(this).attr('disabled',true);
                            $(this).parent().parent().parent().parent().find('.cityall').attr('disabled',true);
                        }
                    }
                  
                });
    }
	
    function selectAreas(){
        clearSelects();
        var old_citys = $('#areas').html().split(';');
      
                
        $('.city').each(function(){
            var parentcheck = false;
            for(var i in old_citys){
                if(old_citys[i]==$(this).attr('city')){
                    parentcheck = true;
                    $(this).get(0).checked = true;
                    break;
                }
            }
            if(parentcheck){
                $(this).parent().parent().parent().parent().find('.cityall').get(0).checked=  true;
            }
        });
        
        $("#modal-areas").modal();
        var citystrs = '';
        $('#btnSubmitArea').unbind('click').click(function(){
			console.log(1);
                   $('.city:checked').each(function(){              
                       citystrs+= $(this).attr('city') +";";
                   }); 
                   $('#areas').html(citystrs);
                   $("#selectedareas").val(citystrs);
        })
    
    }

</script>