динамичные checkbox - JavaScript, Ajax

Damhurz · 23.03.2009, 17:03

подскажите как сделать так, чтобы вместо последнего select образовывался checkbox, для множественного выбора?

PHP код:


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

  $('#model').change(function(){

      if($(this).val().length != 0) { alert('Выбор сделан!'); }

  });



});

</script>

</head>

<body>

  <div class="border">

  <label>Страна</label><br />

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

  </div>

</body>

Damhurz · 23.03.2009, 17:03

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

    }

}

?>

SkyM@n · 27.03.2009, 20:45

Цитата:

Сообщение от Damhurz

подскажите как сделать так, чтобы вместо последнего select образовывался checkbox, для множественного выбора?

Юзать не селект, а чекбокс.

23.03.2009, 17:03	#1
Damhurz Пользователь Регистрация: 12.03.2009 Сообщений: 43	динамичные checkbox подскажите как сделать так, чтобы вместо последнего select образовывался checkbox, для множественного выбора? PHP код: <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); $('#model').change(function(){ if($(this).val().length != 0) { alert('Выбор сделан!'); } }); }); </script> </head> <body> <div class="border"> <label>Страна</label><br /> <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> </div> </body> Последний раз редактировалось SkyM@n; 27.03.2009 в 20:44.

23.03.2009, 17:03	#2
Damhurz Пользователь Регистрация: 12.03.2009 Сообщений: 43	сторона сервера: 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:"Выбрать модель"}]'; } } ?> Последний раз редактировалось SkyM@n; 27.03.2009 в 20:44.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
ListView+Checkbox	lantian	Компоненты Delphi	1	04.01.2009 03:28
C++ Builder Как строить динамичные графики?	Yakker	C++ Builder	1	23.10.2008 00:46
DB checkbox	Arsench	PHP	6	09.10.2008 16:01
CheckBox	zzzzz	Компоненты Delphi	6	22.07.2008 12:35