Postupně aktivní selekty (komponenta select) – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Postupně aktivní selekty (komponenta select) – JavaScript, AJAX, jQuery – Fórum – Programujte.comPostupně aktivní selekty (komponenta select) – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
RePRO0
Super člen
30. 9. 2011   #1
-
0
-

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í:
  1. Praha
  2. Liberec
  3. Brno
  4. ...

---

  • Dejme tomu, že vybereme Španělsko (v prvním selektu), poté budeme mít výčet (ve druhém selektu) následující:
  1. Madrid
  2. Valencia
  3. Barcelona
  4. ...

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
Reklama
Reklama
RePRO0
Super člen
30. 9. 2011   #2
-
0
-

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

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
Řešení
RePRO0
Super člen
1. 10. 2011   #4
-
0
-
Vyřešeno 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
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 163 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý