Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

3 Stron V  < 1 2 3  
Reply to this topicStart new topic
> [PHP]Lista rozwijana ze zmiennymi
david8213
post 22.11.2018, 13:57:28
Post #41





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Co tu jest nie tak ?

  1. .ukryte {
  2. display:none;
  3. }
  4. .sprawdz:checked + label +.ukryte {
  5. display: block;
  6. }
  7.  
  8. <div>
  9. <div>
  10. <label> Wybierz opcję</label>
  11. <select id="medwet" name="2" value="medwet" class="sprawdz"/>
  12. <option value="" ></option>
  13. <option value="1" >aaaaaaa</option>
  14. <option value="2" >bbbbbbb</option>
  15. <option value="3" >ccccccc</option>
  16. </select>
  17. </div>
  18. </div>
  19.  
  20. <div class="ukryte" >
  21. <label > Wybierz srednice </label>
  22. <select class="" id="" name="">
  23. <option value="1" >200</option>
  24. <option value="2" >180</option>
  25. <option value="3" >160</option>
  26. </select>
  27. </div>
  28. </div>
  29. </div>


Ten post edytował david8213 22.11.2018, 13:59:36
Go to the top of the page
+Quote Post
trueblue
post 22.11.2018, 14:02:16
Post #42





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


To samo co wcześniej.


--------------------
Go to the top of the page
+Quote Post
david8213
post 22.11.2018, 15:16:30
Post #43





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


a czy jest możliwość zrobienia warunku...
Jak wybiorę z listy pierwszej aaaaaa lub bbbbb to z drugiej listy bedzie dostępna opcja 180 i 200 a ostatnia czyli 160 będzie zablokowana
oraz jak wybiorę z listy pierwszej cccccc to na drugiej liście zablokowane będzie 200 i 180 a odblokuje się opcja 160

Czy w css nie da się tego zrobić ?

Ten post edytował david8213 22.11.2018, 15:25:10
Go to the top of the page
+Quote Post
leonpro778
post 23.11.2018, 14:36:18
Post #44





Grupa: Zarejestrowani
Postów: 146
Pomógł: 19
Dołączył: 1.03.2012

Ostrzeżenie: (0%)
-----


@david8213

Heh, trochę śmieszy mnie Twoje podejście do pewnych spraw. Jak na jednym forum nie podadzą Ci GOTOWEGO rozwiązania to biegniesz na drugie i na odwrót. Rozwiązanie Twojego problemu to (tak jak pisałem wcześniej):
- JS
- onChange
- blokowanie optionów (https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_disabled2)

Go to the top of the page
+Quote Post
david8213
post 24.11.2018, 14:52:58
Post #45





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Jak wybiorę opcję z listy pierwszej 111111111 to ma mi zablokować pozycję czwartą z listy drugiej czyli 160

Moze mi ktoś pomóc z warunkiem chodzi o składnię



  1. <script>
  2. if (document.getElementById("rodzaj_rury").options[1] = true;) {
  3. var x = document.getElementById("srednica_rury").options[4].disabled = true;
  4. }
  5.  
  6. </script>
  7.  
  8.  
  9. <select class="element select medium" id="rodzaj_rury" name="rodzaj_rury" onChange="myFunction()">
  10.  
  11. <option value="1" >11111111 </option>
  12. <option value="2" >22222222</option>
  13. <option value="3" >33333</option>
  14. <option value="4" >444444444</option>
  15. <option value="5" >5555555555</option>
  16. <option value="6" >66666666</option>
  17. <option value="7" >777777777</option>
  18. <option value="8" >888888888</option>
  19. <option value="9" >99999999</option>
  20. </select>
  21. </div>
  22.  
  23. <label class="description" for="element_4">Wybierz średnicę rury </label>
  24. <div>
  25. <select class="element select medium" id="srednica_rury" name="srednica_rury">
  26.  
  27. <option value="1" >190</option>
  28. <option value="2" >180</option>
  29. <option value="3" >170</option>
  30. <option value="4" >160</option>
  31.  
  32. </select>
  33.  



To tez nie działa

  1. <script>
  2. if ((document.getElementById('rodzaj_rury').options[1].selected==True) or (document.getElementById('rodzaj_rury').options[2].selected==True)) {
  3. var x = document.getElementById("srednica_rury_120").disabled = true;
  4. } else {
  5. var x = document.getElementById("srednica_rury_120").disabled = false;
  6. }
  7. </script>


Ten post edytował david8213 24.11.2018, 18:24:29
Go to the top of the page
+Quote Post
Neutral
post 24.11.2018, 19:56:13
Post #46





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


  1. <select id="trees">
  2. <option value="oak">oak</option>
  3. <option value="pine">pine</option>
  4. <option value="spruce">spruce</option>
  5. <option value="beech">beech</option>
  6. <option value="apple tree">apple tree</option>
  7.  
  8. <select id="tree_type">
  9. <option value="deciduous">deciduous</option>
  10. <option value="conifer">conifer</option>
  11. <option value="conifer">conifer</option>
  12. <option value="deciduous">deciduous</option>
  13. <option value="deciduous">deciduous</option>


Kod
const arr = ['oak', null,'spruce'];
const arr2 = [4, 2, null];

function a() {
    
    for(var i=0;i<document.getElementById('trees').length;i++) {
        for(var j=0;j<arr.length;j++) {
            
            if(arr2[j] === null) {
                continue;
            }
            
            document.getElementById('tree_type').children[arr2[j]].disabled = false;
            
            if(document.getElementById('trees').selectedOptions[0].value === arr[j]) {
                document.getElementById('tree_type').children[arr2[j]].disabled = true;
            }
            
        }
    }
    
}

a();

document.getElementById("trees").addEventListener('change', a, false);


Do arr wpisujesz nazwy, które masz w select#trees, a do arr2 te, które są w select#tree_type. Indeks w tablicy arr odpowiada indeksowi w arr2, więc jeśli w arr jest 'oak' i aktualnie jest zaznaczony, to wtedy zablokuj możliwość wyboru w select#tree_type o numerze takim, jaki jest w arr2.

Poszukaj funkcji itp., żeby skrócić zapis z dwiema pętlami, jeśli się da oczywiście.

Jeśli skrypt nie będzie działał jak należy, pisz.

Ten post edytował Neutral 24.11.2018, 19:59:21
Go to the top of the page
+Quote Post
david8213
post 25.11.2018, 09:46:13
Post #47





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Menu ma wyglądać jak poniżej
Czyli Dla Rury od standardowa do Plastikowa mają być dostępne tylko opcje 300, 250, 200 natomiast dla
rur gumowej i stalowej mają być dostępne tylko opcje 150, 100

Czy da radę zrobić to wykorzystując tą funkcję ?



  1. <form>
  2. <select id="trees">
  3. <option value="standardowa">Standardowa</option>
  4. <option value="miedziana">Miedziana</option>
  5. <option value="aluminiowa">Aluminiowa</option>
  6. <option value="platynowa">Platynowa</option>
  7. <option value="pozłacana">Pozłacana</option>
  8. <option value="posrebrzana">Posrebrzana</option>
  9. <option value="plastikowa">Plastikowa</option>
  10. <option value="gumowa">Gumowa</option>
  11. <option value="stalowa">Stalowa</option>
  12. </select>
  13.  
  14. <select id="tree_type">
  15. <option value="sr_rury300">300</option>
  16. <option value="sr_rury250">250</option>
  17. <option value="sr_rury200">200</option>
  18. <option value="sr_rury150">150</option>
  19. <option value="sr_rury100">100</option>
  20. </select>
  21. </form>
  22.  
  23. <script>
  24. const arr = ['standardowa','miedziana','aluminiowa','platynowa','pozłacana','posrebrzana','plastikowa','gumowa','stalowa',null];
  25. const arr2 = [4, 4, 4, 4, 4, 4, 4, 2, 2, null];
  26.  
  27. function a() {
  28.  
  29. for(var i=0;i<document.getElementById('trees').length;i++) {
  30. for(var j=0;j<arr.length;j++) {
  31.  
  32. if(arr2[j] === null) {
  33. continue;
  34. }
  35.  
  36. document.getElementById('tree_type').children[arr2[j]].disabled = false;
  37.  
  38. if(document.getElementById('trees').selectedOptions[0].value === arr[j]) {
  39. document.getElementById('tree_type').children[arr2[j]].disabled = true;
  40. }
  41.  
  42. }
  43. }
  44.  
  45. }
  46.  
  47. a();
  48.  
  49. document.getElementById("trees").addEventListener('change', a, false);
  50.  
  51. </script>


Tu coś mi ne działa bo nie blokuje opcji wskazanych w tablicy

Ten post edytował david8213 25.11.2018, 09:59:12
Go to the top of the page
+Quote Post
Neutral
post 25.11.2018, 18:03:12
Post #48





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


Kod
const arr = [
[0, 3, 4],
[1],
[2],
[3],
[4],
[5],
[6, 3, 4],
[7, 0, 1, 2],
[8, 0, 1, 2]
];

function get_el_id(id) {
    return document.getElementById(id);
}

var x = [];

function loop_options(option) {
    
    if(x.length > 1) {
        x.splice(1,1);
        x.push(option.slice());
    } else {
        x.push(option.slice());
    }
        
    x = x.reverse();
        
    if(x.length > 1) {
        for(var j=1;j<x[1].length;j++) {
            get_el_id('tree_type').children[x[1][j]].disabled = false;
        }
    }
    
    for(var i=1;i<option.length;i++) {
        get_el_id('tree_type').children[option[i]].disabled = true;
    }

}

function disable_options() {
    arr.forEach(function(option) {
        
        if(option[0] == get_el_id('trees').selectedIndex) {
            loop_options(option);
        }
        
    });
}

disable_options();

get_el_id('trees').addEventListener('change', disable_options, false);


Pierwszy element w podtablicy oznacza kolejno indeks option'a.
Go to the top of the page
+Quote Post
david8213
post 25.11.2018, 21:02:15
Post #49





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Dziekuję...bardzo mi pomogles smile.gif
Pięknie działa smile.gif ale jest mały błąd ...
Podczas wyboru ostatnich dwóch opcji jest zrobiona blokada na 300 a domyślnie wybiera 300 a ma być 150
Można jeszcze np ustawić w tablicy dla każdej opcji domyślne ustawienie ?
Np dla pierwszych siedmiu 300 a dla ostatnich dwóch 150
..a najlepiej jakby przy każdym wyborze rury wcześniej się średnica się resetowala gdyby ktoś klikał jak popadnie

Ten post edytował david8213 25.11.2018, 21:44:26
Go to the top of the page
+Quote Post
Neutral
post 26.11.2018, 01:20:17
Post #50





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


  1. <select id="trees">
  2. <option value="standardowa">Standardowa</option>
  3. <option value="miedziana">Miedziana</option>
  4. <option value="aluminiowa">Aluminiowa</option>
  5. <option value="platynowa">Platynowa</option>
  6. <option value="pozłacana">Pozłacana</option>
  7. <option value="posrebrzana">Posrebrzana</option>
  8. <option value="plastikowa">Plastikowa</option>
  9. <option value="gumowa">Gumowa</option>
  10. <option value="stalowa">Stalowa</option>
  11. <option value="anonymous">Anonymous</option>
  12.  
  13. <select id="tree_type">
  14. <option value="sr_rury300">300</option>
  15. <option value="sr_rury250">250</option>
  16. <option value="sr_rury200">200</option>
  17. <option value="sr_rury150">150</option>
  18. <option value="sr_rury100">100</option>
  19. <option value="sr_rury50">50</option>


Kod
const arr = [
[0, 3, 4],
[1],
[2],
[3],
[4],
[5],
[6, 3, 4],
[7, 0, 1, 2],
[8, 0, 1, 2],
[9, 0, 1, 2, 3, 4, 5]
];

function get_el_id(id) {
    return document.getElementById(id);
}

var x = [];

function loop_options(option) {
    
    if(x.length > 1) {
        x.splice(1,1);
        x.push(option.slice());
    } else {
        x.push(option.slice());
    }
        
    x = x.reverse();
        
    if(x.length > 1) {
        for(var j=1;j<x[1].length;j++) {
            get_el_id('tree_type').children[x[1][j]].disabled = false;
        }
    }
    
    for(var i=1;i<option.length;i++) {
        get_el_id('tree_type').children[option[i]].disabled = true;
    }

}

var blank_option2 = false;

function first_non_disabled(option, incrementator, recursive) {

    if(option.length-1===get_el_id('tree_type').children.length) {
        blank_option2 = true;
        let new_option = document.createElement('option');
        new_option.selected = true;
        get_el_id('tree_type').add(new_option);
        get_el_id('tree_type').disabled = true;
    } else {
        if(blank_option2 === true) {
            blank_option2 = false;
            get_el_id('tree_type').children[get_el_id('tree_type').children.length-1].remove();
            get_el_id('tree_type').disabled = false;
        }

        if(option[recursive]!==incrementator) {    
            get_el_id('tree_type').children[incrementator].selected = true;
        } else {
            recursive++;
            incrementator++;
            first_non_disabled(option, incrementator, recursive);
        }
    }
    
}

function disable_options() {
    arr.forEach(function(option) {
        
        if(option[0] === get_el_id('trees').selectedIndex) {
            loop_options(option);
            first_non_disabled(option, 0, 1);
        }
        
    });
}

disable_options();

get_el_id('trees').addEventListener('change', disable_options, false);


Masz, proszę. Tak jak chciałeś, dopisałem nowy "moduł" do kodu. Jeśli będziesz dodawać nowe opcje do select'a, to będziesz musiał też modyfikować tablicę arr.

Od elementu jeden i dalej w podtablicy możesz umieszczać indeksy option'a, który ma być zablokowany (disabled), przykład:

  1. <select id="trees">
  2. <option value="oak">oak</option>
  3. <option value="beech">beech</option>
  4. <option value="apple tree">apple tree</option>
  5. <option value="pear tree">pear tree</option>
  6. <option value="cherry tree">cherry tree</option>
  7. <option value="hazel">hazel</option>
  8.  
  9. <select id="tree_type">
  10. <option value="conifer">conifer1</option>
  11. <option value="conifer">conifer2</option>
  12. <option value="deciduous">deciduous1</option>
  13. <option value="deciduous">deciduous2</option>

Kod
const arr = [
   [0, 1, 3]
];

Jeśli wybierzesz opcję "oak", czyli zero (0), to wtedy zablokowane zostaną indeksy jeden i trzy (1, 3), czyli "conifer2" i "deciduous2".

Powyższy kod dla wybranego option'a o indeksie zero z select'a pierwszego zablokuje możliwość wyboru select'owi drugiemu indeksy jeden i trzy. W ten sposób właśnie umieszczaj dane w tej tablicy. Najpierw indeks option'a w pierwszym select i dalej indeksy, które będą blokowane w drugim select. Jeśli nic, nie ma być zablokowane w drugim select, to wtedy możesz umieścić sam tylko indeks, przykład:
Kod
const arr = [
   [5]
];

Ten zapis w kodzie nie zablokuje żadnego option'a w select drugim, ponieważ jest podany tylko indeks pierwszego option'a (5 - hazel), a opcje do zablokowania nie są podane, więc nic nie zostanie zablokowane w drugim select.

Ten post edytował Neutral 26.11.2018, 02:02:49
Go to the top of the page
+Quote Post

3 Stron V  < 1 2 3
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 09:05