Postupně aktivní selekty (komponenta select)

Fórum › JavaScript, AJAX, jQuery

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

RePRO0

Super člen

30. 9. 2011 #1

Zdravím,

dejme tomu, že máme dva selekty (stát a město). No a mě by zajímalo, jak by se dalo udělat následující (elegantně - nejlépe snad jQuery):

1. Select stát bude aktivní (Select město nebude aktivní - nelze otevřít).

2. Vybere se Česká republika (v prvním selektu) a druhý selekt se aktivuje (to znamená: pokud je aktivovaný první selekt, může být aktivovaný i druhý selekt (snad chápete) - je to logické).

3. Příklad:

Dejme tomu, že vybereme Česká republika (v první selektu), poté budeme mít výčet (ve druhém selektu) následující:

Praha
Liberec
Brno
...

---

Dejme tomu, že vybereme Španělsko (v prvním selektu), poté budeme mít výčet (ve druhém selektu) následující:

Madrid
Valencia
Barcelona
...

Nejraději budu, pokud sem někdo hodí odkaz na Sample, nebo vlastní Sample. Vyvarujte se prosím obecným kecům - moc to nemám v oblibě. :) Já raději kódy - to jest praxe.

S pozdravem,

RePRO.

Nahlásit jako SPAM

IP: 95.82.185.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

RePRO0

Super člen

30. 9. 2011 #2

Těžko říct, snad něco na tento způsob... zkusím teď něco večer vymyslet, ale možná budete rychlejší...

$(document).ready(function() {
	$("#select1").change(function() { 
		$('#select2').removeAttr('disabled');
	});
});

Nahlásit jako SPAM

IP: 95.82.185.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

RePRO0

Super člen

30. 9. 2011 #3

Ale potřebuji to nějak upravit... resp. pracovat s tou proměnnou R. Nevím, jak jí zakomponovat do toho postu:

  <script>
          $(document).ready(function() {
	            $("#select1").change(function() { 
		                var r = getSelected('#select1');
                    $('#select2').removeAttr('disabled');
                    $('#test').text(r);
                    
                    $.post('nactiDataDB.php', null, function(data) {
                  
                         $('#select2').html(data);
                    });    
	            });
          });
        
          function getSelected(selectId) {
            $select = $(selectId);
            var str = "";
            
            $('#select1 option:selected').each(function () {
                str += $(this).text() + " ";
            });
                    
            return str;
          }
          
          </script>

Nahlásit jako SPAM

IP: 95.82.185.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

RePRO0

Super člen

1. 10. 2011 #4

Nejlepší odpověď

soubor: index.html

 
 <!DOCTYPE html>
   <html lang = "cs-cz" dir = "ltr">
       <head>
          <meta charset = "UTF-8">
          <title>Závislý select</title>
        
          <script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js"></script>
          <script>
          $(document).ready(function() {
              $("#select1").change(function() { 
                  
                  var r = getSelected('#select1');
                  $('#select2').removeAttr('disabled');
                  
                  $.get('test.php', {param: r}, function(data) {
                  
                        $('#select2').html(data);
                  });    
              });
          });
        
          function getSelected(selectId) {
              
              $select = $(selectId);
              var str = "";
              
              $('option:selected', $select).each(function () {
                        
                        str += $(this).text() + " ";
              });        
          return str;
          }
          
          </script>
        
          </head>
          <body>
          
          <select name = "select1" id = "select1">
          <option selected = "selected"> --  </option>
          <option name = "cesko" value = "cesko"> Česká republika  </option>
          <option name = "spanelsko" value = "spanelsko"> Španělsko </option>
          </select>
          
          <select name = "select2" id = "select2" disabled = "disabled">
          </select>
            
       </body>
   
   </html>

===
soubor: test.php

<?php
  switch (trim($_GET['param'])) {
      case 'Španělsko': echo "<option name = \"madrid\" value = \"madrid\" selected = \"selected\">Madrid</option>
                              <option name = \"sevilla\" value = \"sevilla\">Sevilla</option>";
      break;
      case 'Česká republika': echo "<option name = \"praha\" value = \"praha\" selected = \"selected\">Praha</option>
                                    <option name = \"olomouc\" value = \"olomouc\">Olomouc</option>";
      break;
  }
?>

Nahlásit jako SPAM

IP: 95.82.185.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

← Zpět na seznam vláken ← Zpět do Fóra