NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Vytvorenie dvoch rozbalovacích menu s tlacidkom potvrdiť

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Tomáš Šimčík
Člen
Avatar
Tomáš Šimčík:27.11.2018 22:42

Ahoj,

snažím sa vytvoriť 2 rozbaľovacie menu s jedným tlačidko pre potvrdenie výberu, ale keďže som ešte nič normalne nevytvoril v javascripte tak neviem ani ako začať.

Ide o to, že prvy menu ma obsahovať 2 možnosti.

Ak si vyberiem možnosť 1 tak v druhom menu chcem aby sa zobrazili možnosti ktoré určim ak je vybrata možnosť 1 v prvom menu. Následne by bolo niekde vedľa tlačidko ktore keď stačím tak podľa vybratých možnosti mi otvorí požadovanú stránku.

Na jednej stranke som to nasiel vid obrazok v prílohe.

Zkusil jsem: Zatiaľ som len hľadal na nete či niekto take niečo nevytvoril ale nenašiel som alebo som hľadal zle.

Chci docílit: Chcem si vytvoriť svoju stránku a tento prvok tam potrebujem.

 
Odpovědět
27.11.2018 22:42
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.11.2018 8:39

google = Multiple level select in html

Je to podobne rozbalovacimu menu.
Bud si to vloz jako pole do js nebo to tahej pres request/jquery jako extra stranku, js event onchange.

https://trans4mind.com/…/Array2D.htm
Tady to treba resi na klikaci tlacitko, input onclick misto select onchange.

  1. person id = 1
  2. name / profesion = profesion
  3. kliknes na 'Go'
  4. a vypise 'engineer'
 
Nahoru Odpovědět
28.11.2018 8:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.11.2018 8:43

google = Multiple level select in html select onchange
google = Two HTML-select boxes linked to each other

Taky zajimave reseni, pomoci dataSet.
https://stackoverflow.com/…o-each-other

<script>
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');

function giveSelection(selValue) {
  sel2.innerHTML = '';
  for(var i = 0; i < options2.length; i++) {
    if(options2[i].dataset.option === selValue) {
      sel2.appendChild(options2[i]);
    }
  }
}

giveSelection(sel1.value);
</script>
<select id="sel1" onchange="giveSelection(this.value)">
  <option value="a">a</option>
  <option value="b">b</option>
</select>
<select id="sel2">
  <option data-option="a">apple</option>
  <option data-option="a">airplane</option>
  <option data-option="b">banana</option>
  <option data-option="b">book</option>
</select>
 
Nahoru Odpovědět
28.11.2018 8:43
Avatar
Tomáš Šimčík
Člen
Avatar
Tomáš Šimčík:28.11.2018 9:29

Diky moc ja som nevedel ako to hladat na google.

Skusil som si vytvoril jeden HTML subor kde som to vlozil ale mne to nefunguje.

Kde mam chybu ? viď obrazok.

 
Nahoru Odpovědět
28.11.2018 9:29
Avatar

Člen
Avatar
Odpovídá na Tomáš Šimčík
:28.11.2018 13:21 
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Dependent select</title>
</head>

<body>
  <section id="selector">
    <select v-model="car">
      <option v-for="(title, value, key) in options1" :key="key" :value="value">
        {{ title }}
      </options>
    </select>
    <br>
    <select v-model="model" :disabled="select2IsDisabled">
      <option v-for="(title, value, key) in options2" :key="key" :value="value">
        {{ title }}
      </options>
    </select>
    <br>
    <button @click="send" :disabled="buttonIsDisabled">
      Send
    </button>
  </section>

  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

  <script>
    new Vue({
      el: '#selector',

      data: {
        car: 'none',
        model: 'none',
        select2IsDisabled: true,
        buttonIsDisabled: true,
        cars: {
          audi: 'Audi',
          bmw: 'BMW'
        },
        models: {
          audi: {
            a5: 'A5',
            a8: 'A8'
          },
          bmw: {
            i5: 'I5',
            i7: 'I7'
          }
        }
      },

      computed: {
        options1 () {
          return {
            none: 'Select option',
            ...this.cars
          }
        },
        options2 () {
          return this.car === 'none'
            ? {
                none: 'Select option'
              }
            : {
                none: 'Select option',
                ...this.models[this.car]
              }
        }
      },

      watch: {
        car (value) {
          if (value === 'none') {
            this.model = 'none'
            this.select2IsDisabled = true
            this.buttonIsDisabled = true
          } else {
            this.select2IsDisabled = false
          }
        },
        model (value) {
          if (value === 'none')
            this.buttonIsDisabled = true
          else
            this.buttonIsDisabled = false
        }
      },

      methods: {
        send () {
          let url = `http://my.domain/${this.car}/${this.model}`
          alert('Sending request to\n' + url)
        }
      }
    })
  </script>
</body>
</html>
 
Nahoru Odpovědět
28.11.2018 13:21
Avatar

Člen
Avatar
Odpovídá na Tomáš Šimčík
:28.11.2018 13:28

Live demo

 
Nahoru Odpovědět
28.11.2018 13:28
Avatar

Člen
Avatar
Odpovídá na Tomáš Šimčík
:28.11.2018 13:36

PS: Vypadol mi riadok. Funkciu car() go watch nahraď touto:

car (value) {
  if (value === 'none') {
    this.model = 'none'
    this.select2IsDisabled = true
    this.buttonIsDisabled = true
  } else {
    this.model = 'none'
    this.select2IsDisabled = false
    this.buttonIsDisabled = true
  }
}
Editováno 28.11.2018 13:38
 
Nahoru Odpovědět
28.11.2018 13:36
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.11.2018 15:36

Kod, pokud ho nedas do forka nebo na jsfiddle neni mozne copy-paste a otestovat. Nevim, kde mas chybu. Dik za pekny obrazek :)

Jake chyby vypisuje js konzola?
Zkousel jsi si jednotlive kroky alertovat?

Pokud nefunguje sel.value (this.value), da se pouzit

sel.options[sel.selectedIndex].value
sel2.innerHTML = '' // tim smazes cely select, v options2 bude undefined, schvale si zkus pod to dat
alert(options2)

Vim, je to v tom kodu, ale ja to jen zkopiroval z te stranky, netestoval.
Ja bych to resil tak, ze sel2 dam display="none" a pod nej do divu vypisu uplne novy select. Pokud chces pouzit ten kod.
A nebo bych data pro oba vypsal do js pole a pak z toho pole vygeneroval selecty.

 
Nahoru Odpovědět
28.11.2018 15:36
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.11.2018 15:48 
<script>
var MultiArray, str, xyz, i, j;

MultiArray = new Array(5)
MultiArray [0] = new Array(2)
MultiArray [0][0] = "Tom"
MultiArray [0][1] = "scientist"
MultiArray [1] = new Array(2)
MultiArray [1][0] = "Beryl"
MultiArray [1][1] = "engineer"
MultiArray [2] = new Array(2)
MultiArray [2][0] = "Ann"
MultiArray [2][1] = "surgeon"
MultiArray [3] = new Array(2)
MultiArray [3][0] = "Bill"
MultiArray [3][1] = "taxman"
MultiArray [4] = new Array(2)
MultiArray [4][0] = "Myrtal"
MultiArray [4][1] = "bank robber"

xyz = new Array(5)
xyz [0] = 'Pracovnik 1';
xyz [1] = 'Pracovnik 2';
xyz [2] = 'Pracovnik 3';
xyz [3] = 'Pracovnik 4';
xyz [4] = 'Pracovnik 5';

str = '';
for (i=0; i<xyz.length; i++)
        str += '<br>' + i +': '+ xyz[i]
str += '<br>---';
i = 3;
for (j=0; j<MultiArray[i].length; j++)
        str += '<br>' + i +', '+ j +': '+ MultiArray[i][j]
document.write(str)

/*

0: Pracovnik 1
1: Pracovnik 2
2: Pracovnik 3
3: Pracovnik 4
4: Pracovnik 5
---
3, 0: Bill
3, 1: taxman
*/
</script>

(asi 10 min, s pouzitim kodu z toho prvniho linku)

Editováno 28.11.2018 15:49
 
Nahoru Odpovědět
28.11.2018 15:48
Avatar

Člen
Avatar
Odpovídá na Peter Mlich
:28.11.2018 16:23

A ráta to riešenie s tým, že prepnem select 1 najskôr na jednu položku a potom na druhú?

 
Nahoru Odpovědět
28.11.2018 16:23
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:29.11.2018 7:35

Ano. Ma zaklad, se zbytkem uz si poradi, ne? Pokud ne, jaky smysl ma googlovat.

 
Nahoru Odpovědět
29.11.2018 7:35
Avatar

Člen
Avatar
Odpovídá na Peter Mlich
:29.11.2018 11:47

Hm. To si nie som istý, keďže píše, že JS neovláda a vygoogliť sa mu to nepodarilo.

 
Nahoru Odpovědět
29.11.2018 11:47
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:29.11.2018 14:32

Nechapu, co po mne chces. Bud radim nebo prodavam hotova reseni. Pokud se to da snadno vygooglovat, tak zkopiruji reseni sem. Nebo, pokud se mi chce to vyrobit.
Tohle je prilis snadny problem, aby si s nim i zacatecnik mohl lehce poradit. Pokud jeho snaha spociva v copy paste, neni to pro mne dost atraktivni. Viz ten jeho obrazek kodu.
Kod, ktery jsem poslal je jednoduche zpracovani pole. Je lehke jej upravit na vypis selectu. Aspon to, si myslim.

<div id=aaa></div>
<script>
  var str = '<select><option value=1>234</option></select>';
  document.getElementById('aaa').innerHTML = str;
</script>

Prislo mi zbytecne se s timhle drbat, tak jsem pouzil document,write;

 
Nahoru Odpovědět
29.11.2018 14:32
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:30.11.2018 7:38

Maximalne by mu mohlo pomoci prepsat to pole takto:

MultiArray = [
["Tom"   , "scientist"],
["Beryl" , "engineer"],
["Ann"   , "surgeon"],
["Bill"  , "taxman"],
["Myrtal", "bank robber"] // nesmi byt carka na konci
];
Editováno 30.11.2018 7:39
 
Nahoru Odpovědět
30.11.2018 7:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.