Этот сайт не наркоманов. Это сайт программистов.

Добро пожаловать на Пыху!

Логин:
Пароль:
 

Нет прописки? Зарегистрируйся!

Новости

Пыха информатор 3.1
Еще более удобное оповещение о флуде!

Краснодарское время: 23 Май, 2012, 05:35:31

Страниц: [1]
Печать
Автор Тема: Динамичные checkbox  (Прочитано 483 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
Damhurz    ↓ 
27 Март, 2009, 03:30:55
НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 14
Сила слова: 0

Всем привет) с JavaScript познакомился сравнительно недавно, но очень заинтересовал язык, есть задачка для решения которой мне посоветовали обратится к программистам этого форума, в общем к делу, есть скрипт описывающий динамичные списки, первый главный и два подчиненных, а как сделать так чтобы вместо последнего списка(модель) создались динамичные checkbox(и) для множественного выбора? Заранее спасибо))
 
HTML

<select id="country">
    <option value="">Выбрать страну</option>
    <option value="1">Германия</option>
    <option value="2">Ю.Корея</option>
    <option value="3">Япония</option>
 
  </select>
  </div>
  <div class="border">
  <label>Автомобиль</label><br />
  <select id="auto" disabled="disabled"></select>
  </div>
  <div class="border">
  <label>Модель</label><br />
 
  <select id="model" disabled="disabled"></select>
 
 

Javascript

<script type="text/javascript">
(function($){
  // очищаем select
  $.fn.clearSelect = function() {
      return this.each(function(){
          if(this.tagName=='SELECT') {
              this.options.length = 0;
              $(this).attr('disabled','disabled');
          }
      });
  }
  // заполняем select
  $.fn.fillSelect = function(dataArray) {
      return this.clearSelect().each(function(){
          if(this.tagName=='SELECT') {
              var currentSelect = this;
              $.each(dataArray,function(index,data){
                  var option = new Option(data.text,data.value);
                  if($.support.cssFloat) {
                      currentSelect.add(option,null);
                  } else {
                      currentSelect.add(option);
                  }
              });
          }
      });
  }
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
 
  // выбор автомобиля
  function adjustAuto(){
   var countryValue = $('#country').val();
   var tmpSelect = $('#auto');
   if(countryValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
    adjustModel();
   } else {
    $.getJSON('cascadeSelectAuto.php',{country:countryValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); adjustModel(); });
    
   }
  };
  // выбор модели
  function adjustModel(){
   var countryValue = $('#country').val();
   var autoValue = $('#auto').val();
   var tmpSelect = $('#model');
   if(countryValue.length == 0||autoValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
   } else {
    $.getJSON('cascadeSelectModel.php',{country:countryValue,auto:autoValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); });
   }
  };
   
  $('#country').change(function(){
   adjustAuto();
  }).change();
  $('#auto').change(adjustModel);
  });
 
});
</script>
 
 
« Последнее редактирование: 27 Март, 2009, 04:00:18 от Damhurz » Записан
phpdude    ↓ 
27 Март, 2009, 03:41:49 , спустя 10 минут 54 секунды
НЕ ХУЕТА! ХУЕТА!

я - ЭМО
Группа: в ухо

Карма: 344
Сообщений: 20780
Сила слова: 1.66

Javascript
  function adjustModel(){
      var countryValue = $('#country').val();
      var autoValue = $('#auto').val();
      var tmpSelect = $('#model');
      if(countryValue.length == 0||autoValue.length == 0) {
          tmpSelect.attr('disabled','disabled');
          tmpSelect.clearSelect();
      } else {
          $.getJSON('cascadeSelectModel.php',{country:countryValue,auto:autoValue},function(data) {
            html = ""
            for(i in data)
            {
                   html += "<input type='checkbox' name='"+data[i].name+"' value='1' />";
            }
            tmpSelect.replaceWith(html);
          });
      }
  };
 

нечто такое :) пока не уточнишь вид данных которые ты подгружаешь из пхп - не о чем разговаривать :)
Записан

забанен. могу забанить других, пишите в личку
BEER. Helping ugly people have sex since 1862.
Damhurz    ↓ 
27 Март, 2009, 03:54:51 , спустя 13 минут 2 секунды
НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 14
Сила слова: 0

точно)
сторона сервера:
 
cascadeSelectAuto.php
PHP

<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
   
    switch($_GET['country']) {
        case '1':
        print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Audi"},{value:"2",text:"BMW"},{value:"3",text:"Opel"}]';
        break;
        case '2':
        print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Daewoo"},{value:"2",text:"Hyundai"},{value:"3",text:"KIA"}]';
        break;
        case '3':
        print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Honda"},{value:"2",text:"Mazda"},{value:"3",text:"Toyota"}]';
        break;
        default:
        print '[{value:"",text:"Выбрать автомобиль"}]';
        break;
    }
   
}
?>
 

 
cascadeSelectModel.php
PHP

<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
   
    if($_GET['country']==1) {
        switch($_GET['auto']) {
            case '1':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"A4"},{value:"2",text:"Q7"},{value:"3",text:"TT"}]';
            break;
            case '2':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"6ER"},{value:"2",text:"M"},{value:"3",text:"X6"}]';
            break;
            case '3':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Astra"},{value:"2",text:"Corsa"},{value:"3",text:"Vectra"}]';
            break;
            default:
            print '[{value:"",text:"Выбрать модель"}]';
            break;
        }
    } elseif($_GET['country']==2) {
        switch($_GET['auto']) {
            case '1':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Matiz"},{value:"2",text:"Nexia"}]';
            break;
            case '2':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Accent"},{value:"2",text:"Elantra"},{value:"3",text:"Sonata"}]';
            break;
            case '3':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Carnival"},{value:"2",text:"Picanto"},{value:"3",text:"Spectra"}]';
            break;
            default:
            print '[{value:"",text:"Выбрать модель"}]';
            break;
        }
    } elseif($_GET['country']==3) {
        switch($_GET['auto']) {
            case '1':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Accord"},{value:"2",text:"Civic"},{value:"3",text:"CR-V"}]';
            break;
            case '2':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Mazda 3"},{value:"2",text:"Mazda 5"},{value:"3",text:"Mazda 6"}]';
            break;
            case '3':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Corolla"},{value:"2",text:"LandCruiser"},{value:"3",text:"RAV4"}]';
            break;
            default:
            print '[{value:"",text:"Выбрать модель"}]';
            break;
        }
    } else {
        print '[{value:"",text:"Выбрать модель"}]';
    }
}
?>
 
Записан
Страниц: [1]
Печать
 

Перейти в: