selectareas.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <style type='text/css'>
  2. .province { float:left; position:relative;width:170px; height:35px; line-height:35px;border:1px solid #fff;padding-top: -10px}
  3. .province:hover { border:1px solid #a6d2fe;border-bottom:1px solid #a6d2fe; background:#edf6ff;}
  4. .province .cityall { margin-top:10px;}
  5. .province ul { list-style: outside none none;position:absolute;padding:0;background:#edf6ff;border:1px solid #a6d2fe;display:none;
  6. width:auto; width:250px; z-index:999999;left:-1px;top:32px;}
  7. .province ul li { float:left;min-width:60px;margin-left:20px; height:30px;line-height:30px; }
  8. .checkbox-inline{
  9. margin: 0;
  10. }
  11. </style>
  12. <div id="modal-areas" class="modal fade" tabindex="-1">
  13. <div class="modal-dialog" style='width: 900px;'>
  14. <div class="modal-content">
  15. <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择区域</h3></div>
  16. <div class="modal-body" style='height:300px;' >
  17. <?php foreach( $areas['province'] as $value ){ ?>
  18. <?php if( $value['@attributes']['name']=='请选择省份'){ ?>{php continue;}<?php } ?>
  19. <div class='province'>
  20. <label class='checkbox-inline' style='margin-left:20px;padding: 0 0 5px 24px;'>
  21. <input type='checkbox' class='cityall' style="margin-top: -10px" / > {php echo $value['@attributes']['name']}
  22. <span class="citycount" style='color:#ff6600'></span>
  23. </label>
  24. <?php if( count($value['city'])>0){ ?>
  25. <ul style="padding-bottom: 15px;">
  26. <?php foreach( $value['city'] as $c ){ ?>
  27. <li>
  28. <label class='checkbox-inline' >
  29. <input type='checkbox' class='city' style='margin-top:-3px;' city="{php echo $c['@attributes']['name']}" /> {php echo $c['@attributes']['name']}
  30. </label>
  31. </li>
  32. <?php } ?>
  33. </ul>
  34. <?php } ?>
  35. </div>
  36. <?php } ?>
  37. </div>
  38. <div class="modal-footer">
  39. <a href="javascript:;" id='btnSubmitArea' class="btn btn-primary" data-dismiss="modal" aria-hidden="true">确定</a>
  40. <a href="javascript:;" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <script language='javascript'>
  46. $(function(){
  47. $('.province').mouseenter(function(){
  48. $(this).find('ul').show();
  49. }).mouseleave(function(){
  50. $(this).find('ul').hide();
  51. });
  52. $('.cityall').click(function(){
  53. var checked = $(this).get(0).checked;
  54. var citys = $(this).parent().parent().find('.city');
  55. citys.each(function(){
  56. $(this).get(0).checked = checked;
  57. });
  58. var count = 0;
  59. if(checked){
  60. count = $(this).parent().parent().find('.city:checked').length;
  61. }
  62. if(count>0){
  63. $(this).next().html("(" + count + ")") ;
  64. }
  65. else{
  66. $(this).next().html("");
  67. }
  68. });
  69. $('.city').click(function(){
  70. var checked = $(this).get(0).checked;
  71. var cityall = $(this).parent().parent().parent().parent().find('.cityall');
  72. if(checked){
  73. cityall.get(0).checked = true;
  74. }
  75. var count = cityall.parent().parent().find('.city:checked').length;
  76. if(count>0){
  77. cityall.next().html("(" + count + ")") ;
  78. }
  79. else{
  80. cityall.next().html("");
  81. }
  82. });
  83. });
  84. function clearSelects(){
  85. $('.city').attr('checked',false).removeAttr('disabled');
  86. $('.cityall').attr('checked',false).removeAttr('disabled');
  87. $('.citycount').html('');
  88. }
  89. function editArea(btn){
  90. current = $(btn).attr('random');
  91. clearSelects();
  92. var old_citys = $(btn).prev().val().split(';');
  93. $('.city').each(function(){
  94. var parentcheck = false;
  95. for(var i in old_citys){
  96. if(old_citys[i]==$(this).attr('city')){
  97. parentcheck = true;
  98. $(this).get(0).checked = true;
  99. break;
  100. }
  101. }
  102. if(parentcheck){
  103. $(this).parent().parent().parent().parent().find('.cityall').get(0).checked= true;
  104. }
  105. });
  106. $("#modal-areas").modal();
  107. var citystrs = '';
  108. $('#btnSubmitArea').unbind('click').click(function(){
  109. $('.city:checked').each(function(){
  110. citystrs+= $(this).attr('city') +";";
  111. });
  112. $('.' + current + ' .cityshtml').html(citystrs);
  113. $('.' + current + ' .citys').val(citystrs);
  114. })
  115. var currents = getCurrents(current);
  116. currents = currents.split(';');
  117. var citys = "";
  118. $('.city').each(function(){
  119. var parentdisabled =false;
  120. for(var i in currents){
  121. if(currents[i]!='' && currents[i]==$(this).attr('city')){
  122. $(this).attr('disabled',true);
  123. $(this).parent().parent().parent().parent().find('.cityall').attr('disabled',true);
  124. }
  125. }
  126. });
  127. }
  128. function selectAreas(){
  129. clearSelects();
  130. var old_citys = $('#areas').html().split(';');
  131. $('.city').each(function(){
  132. var parentcheck = false;
  133. for(var i in old_citys){
  134. if(old_citys[i]==$(this).attr('city')){
  135. parentcheck = true;
  136. $(this).get(0).checked = true;
  137. break;
  138. }
  139. }
  140. if(parentcheck){
  141. $(this).parent().parent().parent().parent().find('.cityall').get(0).checked= true;
  142. }
  143. });
  144. $("#modal-areas").modal();
  145. var citystrs = '';
  146. $('#btnSubmitArea').unbind('click').click(function(){
  147. $('.city:checked').each(function(){
  148. citystrs+= $(this).attr('city') +";";
  149. });
  150. $('#areas').html(citystrs);
  151. $("#limitarea").val(citystrs);
  152. })
  153. }
  154. </script>