ФорумПрограммированиеJavaScript → Динамичные checkbox

Динамичные checkbox

  • Damhurz

    Сообщения: 14 Репутация: N Группа: Кто попало

    Spritz 27 марта 2009 г. 15:30

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


    <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>




    <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>

  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 27 марта 2009 г. 15:41, спустя 10 минут 54 секунды

      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.name+"' value='1' />";
    }
    tmpSelect.replaceWith(html);
    });
    }
    };


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

    Сообщения: 14 Репутация: N Группа: Кто попало

    Spritz 27 марта 2009 г. 15:54, спустя 13 минут 2 секунды

    точно)
    сторона сервера:

    cascadeSelectAuto.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
    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:"Выбрать модель"}]';
    }
    }
    ?>

Пожалуйста, авторизуйтесь, чтобы написать комментарий!