[HTML+JS] Zmiana wartości dla wszystkich pól wyboru

pytanie zadane 16 maja 2022 w JavaScript przez Chlebek Nowicjusz (130 p.)

Witajcie, pracuję na pewnym systemie webowym i mam z nim jeden duży problem - przy pewnych dokumentach mam listę urządzeń, natomiast do każdego z nich mam przypisany domyślnie status tego urządzenia który przed zapisem dokumentu muszę zmienić na poprawny. Czasami taka lista zawiera dziesiątki albo setki pozycji do zmiany, i każdą muszę przeklikiwać ręcznie - strata czasu i nerwów. Niestety muszę liczyć sam na siebie w tej kwestii, nie ma możliwości dorobienia takiej opcji bezpośrednio w aplikacji, stąd chciałem lokalnie "dopisać" sobie kawałek kodu, abym mógł za jednym zamachem wszystkie takie selecty ustawić na konkretną wartość.

Znalazłem podobny wątek:
https://forum.pasja-informatyki.pl/210865/ustawianie-wartosci-wszystkich-pol-select

Pożyczyłem sobie kod z jednej z odpowiedzi, który po mojej nieudolnej przeróbce wygląda tak:

<html>
<head>
    <script>
        function onSelect()
        {
            var mainListIndex = document.getElementsByClassName("condition_select").selectedIndex;
            document.getElementsByClassName("condition_select").selectedIndex = mainListIndex;
        }
    </script>
</head>
<body>
<div>
    <select id="mainList" class="condition_select" onChange="onSelect()">
        <option value="0">Wybierz wartość, ktora pojawi się w innych dropdownach</option>
        <option value="1">Opcja 1</option>
        <option value="2">Opcja 2</option>
        <option value="3">Opcja 3</option>
    </select>
</div>
<br/>
<div>
    <select id="detailList1" class="condition_select" name="detailList1">
        <option value="0">Wybierz</option>
        <option value="1">Opcja 1</option>
        <option value="2">Opcja 2</option>
        <option value="3">Opcja 3</option>
    </select>

    <select id="detailList2" class="condition_select" name="detailList2">
        <option value="0">Wybierz</option>
        <option value="1">Opcja 1</option>
        <option value="2">Opcja 2</option>
        <option value="3">Opcja 3</option>
    </select>
</div>
</body>
</html>

Natomiast kawałek kodu aplikacji na której pracuję wygląda następująco:

<select  id="12345678_" class="condition_select" name="12345678[]">
<option value=""></option>
<option value="1" selected="selected">Opcja 1</option>
<option value="2">Opcja 2</option>
<option value="3">Opcja 3</option>
<option value="4">Opcja 4</option>
<option value="5">Opcja 5</option></select>    
</select>

Problem polega na tym, że w moim wypadku pola id i name zawsze są różne, natomiast klasa jest wspólna dla każdego pola wyboru i jest nią "condition_select". W skrypcie który znalazłem postanowiłem zmienić GetElementById na GetElementsByClassName, na chłopski rozum zmieniając parametr po którym funkcja wyszukuje co ma zmienić. Jednak niestety nie chce to działać... Z racji tego, że nie umiem w JS proszę o pomoc, pewnie będzie to zwykła pierdoła dla osoby znającej JS

W tym konkretnym wypadku nie ma dla mnie znaczenia żeby wszystko było wg. zasad "czystości i poprawności kodu", to ma po prostu działać, dlatego nie ma znaczenia dla mnie czy będzie to oparte na tym co napisałem czy całkowicie inaczej, nawet z pominięciem JS - ma działać.

Z góry serdecznie dziękuję

Pokaż 7 poprzednich komentarzy

komentarz 17 maja 2022 przez VBService Ekspert (253,340 p.)

Update

(() => {
    const style = document.createElement('STYLE');
    document.head.appendChild(style);    
      style.innerText = '.menu_condition { position: absolute; top: 60%; right: 1em; font: 400 0.9em/1 monospace; background-color: rgba(0,0,0,0.7); z-index: 99; }';
      style.innerText += '.menu_condition input[type="radio"] { display: none; }';
      style.innerText += '.menu_condition input[type="radio"]:checked + label { box-shadow: 0 0 2px 2px green; }';
      style.innerText += '.menu_condition label { display: inline-block; margin: 0.25em; padding: 0.25em; transition: box-shadow 0.2s; user-select: none; color: white; }';
       
         
    const div = document.createElement('DIV');
      div.setAttribute('class', 'menu_condition');
 
    const radio_working = document.createElement('INPUT');
      radio_working.setAttribute('type', 'radio');
      radio_working.setAttribute('id', 'condition-0');
      radio_working.setAttribute('name', 'condition');
      radio_working.setAttribute('value', '0');
    div.appendChild(radio_working);
    const label_working = document.createElement('LABEL');
      label_working.setAttribute('for', 'condition-0');
      label_working.textContent = 'Working';
    div.appendChild(label_working);
    const radio_defective = document.createElement('INPUT');
      radio_defective.setAttribute('type', 'radio');
      radio_defective.setAttribute('id', 'condition-1');
      radio_defective.setAttribute('name', 'condition');
      radio_defective.setAttribute('value', '1');    
    div.appendChild(radio_defective);
    const label_defective = document.createElement('LABEL');
      label_defective.setAttribute('for', 'condition-1');
      label_defective.textContent = 'Defective';
    div.appendChild(label_defective);
     
    document.body.appendChild(div); 
     
    const menu = document.querySelector('.menu_condition');
    menu.onclick = setCondition;
                 
    function setCondition(e) {
        if (e.target.nodeName == 'INPUT' && e.target.id.includes('condition')) {
            const condition_input_value = menu.querySelector('input[type="radio"]:checked').value;
                         
            for (const device of document.querySelectorAll('.condition_select'))
                device.options.selectedIndex = condition_input_value;
        }
    }   
})();

chciałbym żeby te przyciski pojawiały się w innym miejscu

Ta linia kodu js z implementacją kodu css odpowiada za pozycjonowanie "menu"

style.innerText = '.menu_condition { position: absolute; top: 60%; right: 1em; font: 400 0.9em/1 monospace; background-color: rgba(0,0,0,0.7); z-index: 99; }'

to nic innego jak

.menu_condition { 
  position: absolute; 
  top: 60%; 
  right: 1em; 
  font: 400 0.9em/1 monospace;
  background-color: rgba(0,0,0,0.7); 
  z-index: 99; 
}

możesz "poeksperymentować" z wartościami atrybutów, w tym przypadku: top, right, możesz podawać wartości w procentach, pixel-ach itp.

[ WPŁYWANIE NA POZYCJĘ ELEMENTU ]
[ JEDNOSTKI UŻYWANE W CSS ]

komentarz 17 maja 2022 przez VBService Ekspert (253,340 p.)

Jakby Tobie udało się "zidentyfikować", która część kodu html "odpowiada za tę belkę" (na zielono na obrazku) to można by było wstawić bezpośrednio w kod html "mini menu", bez konieczności pozycjonowania względem kodu strony, teraz "mini menu" jest dodawane dynamicznie na końcu znacznika <body>

document.body.appendChild(div);

komentarz 17 maja 2022 przez VBService Ekspert (253,340 p.)

Zamiast

za pomocą skryptozakładki

polecam użycie plug-in do przeglądarki: Tampermonkey

komentarz 17 maja 2022 przez Chlebek Nowicjusz (130 p.)

Tampermonkey mimo wszystko jest dodatkiem, a tutaj mam rozwiązanie już zaimplementowane w przeglądarkę, na nasze potrzeby w zupełności wystarczy.

Póki co musimy temat zostawić na kilka dni, gdyż z Waszą pomocą i przykładem udało mi się przekonać devów, żeby zaimplementowali to po stronie serwera, także być może nie trzeba będzie wkrótce robić karkołomnych "wyskoków" ;)

Dziękuję raz jeszcze, obiecuję dać znać czy potrzebuję dalej rozwijać temat.

1	komentarz 17 czerwca 2022 przez Chlebek Nowicjusz (130 p.) Witajcie, wspomnę tylko że dzisiaj mija równo miesiąc od rozwiązania tego problemu i niestety - dalej radzimy sobie po stronie przeglądarki... Także jeszcze raz dziękuję za pomoc i serdecznie pozdrawiam :)