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

Tomáš Šimčík

Člen

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

Peter Mlich

Člen

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.

person id = 1
name / profesion = profesion
kliknes na 'Go'
a vypise 'engineer'

Nahoru Odpovědět

28.11.2018 8:39

Peter Mlich

Člen

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

Tomáš Šimčík

Člen

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

Člen

: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

Člen

:28.11.2018 13:28

Live demo

Nahoru Odpovědět

28.11.2018 13:28

Člen

: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

Peter Mlich

Člen

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

Peter Mlich

Člen

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

Člen

: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

Peter Mlich

Člen

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

Člen

: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

Peter Mlich

Člen

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

Peter Mlich

Člen

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