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

Динамичные checkbox

  • Damhurz

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

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

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


    <select id=&quot;country&quot;>
    <option value=&quot;&quot;>Выбрать страну</option>
    <option value=&quot;1&quot;>Германия</option>
    <option value=&quot;2&quot;>Ю.Корея</option>
    <option value=&quot;3&quot;>Япония</option>

    </select>
    </div>
    <div class=&quot;border&quot;>
    <label>Автомобиль</label><br />
    <select id=&quot;auto&quot; disabled=&quot;disabled&quot;></select>
    </div>
    <div class=&quot;border&quot;>
    <label>Модель</label><br />

    <select id=&quot;model&quot; disabled=&quot;disabled&quot;></select>




    <script type=&quot;text/javascript&quot;>
    (function($){
     // очищаем select
     $.fn.clearSelect = function() {
     return this.each(function(){
     if(this.tagName==&#39;SELECT&#39;) {
         this.options.length = 0;
         $(this).attr(&#39;disabled&#39;,&#39;disabled&#39;);
     }
     });
     }
     // заполняем select
     $.fn.fillSelect = function(dataArray) {
     return this.clearSelect().each(function(){
     if(this.tagName==&#39;SELECT&#39;) {
     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=&quot;text/javascript&quot;>
    $(document).ready(function(){

     // выбор автомобиля
     function adjustAuto(){
      var countryValue = $(&#39;#country&#39;).val();
      var tmpSelect = $(&#39;#auto&#39;);
      if(countryValue.length == 0) {
      tmpSelect.attr(&#39;disabled&#39;,&#39;disabled&#39;);
      tmpSelect.clearSelect();
      adjustModel();
      } else {
      $.getJSON(&#39;cascadeSelectAuto.php&#39;,{country:countryValue},function(data) { tmpSelect.fillSelect(data).attr(&#39;disabled&#39;,&#39;&#39;); adjustModel(); });
     
      }
     };
     // выбор модели
     function adjustModel(){
      var countryValue = $(&#39;#country&#39;).val();
      var autoValue = $(&#39;#auto&#39;).val();
      var tmpSelect = $(&#39;#model&#39;);
      if(countryValue.length == 0||autoValue.length == 0) {
      tmpSelect.attr(&#39;disabled&#39;,&#39;disabled&#39;);
      tmpSelect.clearSelect();
      } else {
      $.getJSON(&#39;cascadeSelectModel.php&#39;,{country:countryValue,auto:autoValue},function(data) { tmpSelect.fillSelect(data).attr(&#39;disabled&#39;,&#39;&#39;); });
      }
     };

     $(&#39;#country&#39;).change(function(){
      adjustAuto();
     }).change();
     $(&#39;#auto&#39;).change(adjustModel);
     });

    });
    </script>

  • phpdude

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

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

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


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

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

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

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

    cascadeSelectAuto.php

    <?php
    header(&#39;Content-Type: text/html; charset=utf-8&#39;);
    if($_SERVER[&#39;HTTP_X_REQUESTED_WITH&#39;] == &#39;XMLHttpRequest&#39;) {

    switch($_GET[&#39;country&#39;]) {
    case &#39;1&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать автомобиль&quot;},{value:&quot;1&quot;,text:&quot;Audi&quot;},{value:&quot;2&quot;,text:&quot;BMW&quot;},{value:&quot;3&quot;,text:&quot;Opel&quot;}]&#39;;
    break;
    case &#39;2&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать автомобиль&quot;},{value:&quot;1&quot;,text:&quot;Daewoo&quot;},{value:&quot;2&quot;,text:&quot;Hyundai&quot;},{value:&quot;3&quot;,text:&quot;KIA&quot;}]&#39;;
    break;
    case &#39;3&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать автомобиль&quot;},{value:&quot;1&quot;,text:&quot;Honda&quot;},{value:&quot;2&quot;,text:&quot;Mazda&quot;},{value:&quot;3&quot;,text:&quot;Toyota&quot;}]&#39;;
    break;
    default:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать автомобиль&quot;}]&#39;;
    break;
    }

    }
    ?>



    cascadeSelectModel.php

    <?php
    header(&#39;Content-Type: text/html; charset=utf-8&#39;);
    if($_SERVER[&#39;HTTP_X_REQUESTED_WITH&#39;] == &#39;XMLHttpRequest&#39;) {

    if($_GET[&#39;country&#39;]==1) {
    switch($_GET[&#39;auto&#39;]) {
    case &#39;1&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;A4&quot;},{value:&quot;2&quot;,text:&quot;Q7&quot;},{value:&quot;3&quot;,text:&quot;TT&quot;}]&#39;;
    break;
    case &#39;2&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;6ER&quot;},{value:&quot;2&quot;,text:&quot;M&quot;},{value:&quot;3&quot;,text:&quot;X6&quot;}]&#39;;
    break;
    case &#39;3&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Astra&quot;},{value:&quot;2&quot;,text:&quot;Corsa&quot;},{value:&quot;3&quot;,text:&quot;Vectra&quot;}]&#39;;
    break;
    default:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;}]&#39;;
    break;
    }
    } elseif($_GET[&#39;country&#39;]==2) {
    switch($_GET[&#39;auto&#39;]) {
    case &#39;1&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Matiz&quot;},{value:&quot;2&quot;,text:&quot;Nexia&quot;}]&#39;;
    break;
    case &#39;2&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Accent&quot;},{value:&quot;2&quot;,text:&quot;Elantra&quot;},{value:&quot;3&quot;,text:&quot;Sonata&quot;}]&#39;;
    break;
    case &#39;3&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Carnival&quot;},{value:&quot;2&quot;,text:&quot;Picanto&quot;},{value:&quot;3&quot;,text:&quot;Spectra&quot;}]&#39;;
    break;
    default:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;}]&#39;;
    break;
    }
    } elseif($_GET[&#39;country&#39;]==3) {
    switch($_GET[&#39;auto&#39;]) {
    case &#39;1&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Accord&quot;},{value:&quot;2&quot;,text:&quot;Civic&quot;},{value:&quot;3&quot;,text:&quot;CR-V&quot;}]&#39;;
    break;
    case &#39;2&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Mazda 3&quot;},{value:&quot;2&quot;,text:&quot;Mazda 5&quot;},{value:&quot;3&quot;,text:&quot;Mazda 6&quot;}]&#39;;
    break;
    case &#39;3&#39;:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;},{value:&quot;1&quot;,text:&quot;Corolla&quot;},{value:&quot;2&quot;,text:&quot;LandCruiser&quot;},{value:&quot;3&quot;,text:&quot;RAV4&quot;}]&#39;;
    break;
    default:
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;}]&#39;;
    break;
    }
    } else {
    print &#39;[{value:&quot;&quot;,text:&quot;Выбрать модель&quot;}]&#39;;
    }
    }
    ?>

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