Podwójny select

0

Witam!

Mam prośbę, wie ktoś, jak zrobić aby wybór opcji w jednym select powodowało zmianę wartości do wyboru w drugim. Przy wybraniu jakiegoś tematu z pierwszej listy, w drugiej dostaje się tylko opcje należące do tej kategorii.

0

może jakieś szczegóły bo wiem co chcesz zrobić tylko nie wiem jak. Głównie chodzi mi o ten fragment "wybór opcji w jednym select" - wybór jak, gdzie, czym? "wybraniu jakiegoś tematu z pierwszej listy" jaka lista? Może jakiś kod :>

0

Chodzi mi o coś takiego, masz jeden select i w nim np.: Marke samochodu, jeżeli ją wybierzesz to ma do niej wypisać jej modele. Np. Wybierasz FORD to masz mieć w drugim select escort, sierra, focus, itp. Wszystko myszką, rozwijalne, zwykłe pole select. Tylko nie wiem jak to uzależnić, żeby wybór jednego powodował zmianę drugiego. Czy robić to poprzez JavaScript? Zależy mi, żeby nie trzeba było odswieżać strony, żeby np. JavaScript to zmieniał, ale nie wiem jak.

Ja to już sobie później "ubiorę" w kod, ale chodzi mi o prosty przykład gdzie są 2 selecty wybierasz jeden i masz w drugim podkategorię do tego wybranego.

Teraz znalazłam na szybko, coś w tym stylu: http://algorytmy.pl/00/09/55a.gif

Dziękuję.

0

no to coś w ten deseń

<html>
<body>
<script type="text/javascript">
function Zmien()
{
  var wybrane = document.test.s1.options[document.test.s1.selectedIndex].value;
  if (wybrane=="volvo")
  {
    //tu musisz dodać dane do s2
  };

};

</script>
<FORM NAME="test">
<select name="s1" onchange=Zmien()>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value ="opel">Opel</option>
  <option value ="audi">Audi</option>
</select>

<select name="s2">

</select>
</form>
</body>
</html>

ale co dalej to już nie wiem :)

0

Ok! O to mi chodzilo.

Ale jak mam tam dane dodac? Jak robie to poprzez document.write("<option value="audi">Audi</option>"); to wyswietla mi ten napisa np. Audi w nowym oknie.

Dzieki.

0

Tu masz kompletny przyklad:

<script>
var zwierzeta = [
  ['z1', 'ssaki', [
    ['z1a', 'czlowiek'],
    ['z1b', 'pies'],
    ['z1c', 'wieloryb']    
  ]],
  ['z2', 'ptaki', [
    ['z2a', 'wrobel'],
    ['z2b', 'sroka'],
    ['z2c', 'golab']    
  ]],
  ['z3', 'gady', [
    ['z3a', 'zolw'],
    ['z3b', 'jaszczurka'],
    ['z3c', 'krokodyl']    
  ]]
];
function setSelectContent(slct, ar) {
  var opt = slct.options;
  opt.length = 0;
  for (var i = 0; i < ar.length; i++) {
    opt[opt.length] = new Option(ar[i][1], ar[i][0]);
  }
}
onload = function() {
  var slct1 = document.getElementById('slct1');
  var slct2 = document.getElementById('slct2');
  slct1.onchange = function() {
    var val = this.options[this.selectedIndex].value;
    for (var i = 0; i < zwierzeta.length; i++) {
      if (zwierzeta[i][0] == val) {
        setSelectContent(slct2, zwierzeta[i][2]);
        break;
      }
    }
  }
  setSelectContent(slct1, zwierzeta);
  slct1.onchange();
}
</script>
<select id="slct1"></select>
<select id="slct2"></select>

1 użytkowników online, w tym zalogowanych: 0, gości: 1