#javascript Autoselezione dropdown in base a valore di altro campo

**Annuitcoeptis** · 27-11-2022, 13:55

Buongiorno, potreste aiutarmi? Da questa pagina salvata:

https://spazioweb.w3spaces.com/reference.html

vorrei fosse autoselezionato:
"INTERNA" nel campo "Circolazione", se l'utente digita
"REF." in "Sezione"

Questo dovrebbe essere il blocco di codice dei valori dropdown di "Circolazione", grazie!

codice HTML:

<select id="idtpCircolazione" name="tpCircolazione" onchange="controllaMovimentiInve();" style="min-width: 0px; display: none;">
<option value="D">DISTRIBUTORE</option>
<option selected="" value="I">INTERNA</option>
<option value="L">LIBERA</option>
<option value="N">NO</option>
<option value="O">Disponibile online</option>
<option value="Y">Escluso ILL/ISS a tempo</option>
<option value="Z">Escluso ILL/ISS definitivo</option>
</select>

[/COLOR]

**Annuitcoeptis** · 27-11-2022, 17:01

Ho provato così ma non va:

let input = document.querySelector("#i");
let option = document.querySelector('#o');
input.addEventListener('change', function(){
let value = input.value;
if(value==="REF."){
option.setAttribute("selected",true);
}
})

**ninja72** · 27-11-2022, 20:53

Forse intendi qualcosa del genere ?

codice:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" method="post">
        <input type="text" id="cdSezi" value="REF.">
        <select id="idtpCircolazione" name="tpCircolazione">
            <option value="D">DISTRIBUTORE</option>
            <option value="I">INTERNA</option>
            <option value="L">LIBERA</option>
            <option value="N">NO</option>
            <option value="O">Disponibile online</option>
            <option value="Y">Escluso ILL/ISS a tempo</option>
            <option value="Z">Escluso ILL/ISS definitivo</option>
        </select>
    </form>

    <script>

        const select = document.getElementById('idtpCircolazione')
        const ref = document.getElementById('cdSezi')
        const optionI = Array
            .from(select.children)
            .filter(option => option.value.includes('I'))

        function controllaMovimentiInve() {
            ref.value == 'REF.'
                ? optionI[0].setAttribute('selected', '')
                : optionI[0].removeAttribute('selected')
        }
        controllaMovimentiInve()
        ref.addEventListener('input', controllaMovimentiInve)

    </script>
</body>

</html>

**Annuitcoeptis** · 27-11-2022, 22:45

Grande, grazie mille, un abbraccio, caro Ninja!!!

**Annuitcoeptis** · 03-12-2022, 14:37

Aggiornamento.
Lo script non sempre funziona come si può vedere da questo video (al terzo riempimento del campo). Si può risolvere aggiungendo l'opzione alternativa "L" (ovvero circolazione LIBERA) quando il campo sezione è valorizzato con un valore differente da REF.? Grazie!

**ninja72** · 03-12-2022, 17:42

Ho rivisto il codice , effettivamente sembra ci fosse un bug che ho riscontrato solo su Firefox.

codice:

 const select = document.getElementById('idtpCircolazione')
        const ref = document.getElementById('cdSezi')

        const optionI = Array
            .from(select.children)
            .filter(option => option.value == 'I')

        const optionL = Array
            .from(select.children)
            .filter(option => option.value == 'L')

        function controllaMovimentiInve() {
            ref.value == 'REF.'
                ? optionI[0].selected = true
                : optionI[0].selected = false
            ref.value == 'L'
                ? optionL[0].selected = true
                : optionL[0].selected = false
        }
        controllaMovimentiInve()
        ref.addEventListener('input', controllaMovimentiInve)

**Annuitcoeptis** · 03-12-2022, 18:38

Grazie, ora con "REF." sembra rispondere sempre bene, con gli altri valori mi da sempre "DISTRIBUTORE" in Circolazione (il primo della lista) anziché "LIBERA". Ho provato anche a sostituire la "L" (LIBERA") con le altre lettere ma il risultato è lo stesso.

Il link è questo.

P.S. Ho provato con questo script ma il comportamento è analogo a quello del video di sopra...

codice:

document.getElementById('cdSezi').addEventListener('change', (ev) => {
    const val = ev.target.value;
    if (val === 'REF.') {
        // Select circolazione.
        document.getElementById('idtpCircolazione').value = 'I';
    }
});

**ninja72** · 03-12-2022, 20:14

Quando non c'è nessuna selezione o quando il valore non trova il match con i valori impostati torna al valore di default, cioè la prima option della select che in questo caso è "DISTRIBUTORE".
Non ho ben capito se vuoi mappare tutti i valori delle option o solo alcuni, comunque se scrivi "L" la select riporterà "LIBERA", ma puoi mappare la cosa a tuo piacimento il codice e facilmente adattabile. Ciao

**Annuitcoeptis** · 03-12-2022, 21:43

Vorrei prendere in considerazione solo due valori in Circolazione: INTERNA quando in Sezione c'è REF. (qui lo script funziona) e LIBERA in tutti gli altri casi. Quindi quando in Sezione c'è qualsiasi valore differente da "REF." (ad esempio A., R.C., etc.) corrispondentemente in Circolazione dovrebbe essere autoselezionato sempre e solo "LIBERA", ma in questo caso con l'ultimo codice mi da invece il valore di default "DISTRIBUTORE".

**ninja72** · 03-12-2022, 22:31

Cosi dovrebbe andare , ciao.

codice:

const select = document.getElementById('idtpCircolazione')
        const ref = document.getElementById('cdSezi')

        const optionI = Array
            .from(select.children)
            .filter(option => option.value == 'I')

        const optionL = Array
            .from(select.children)
            .filter(option => option.value == 'L')

        function controllaMovimentiInve() {
            ref.value == 'REF.'
                ? optionI[0].selected = true
                : optionL[0].selected = true
        }
        controllaMovimentiInve()
        ref.addEventListener('input', controllaMovimentiInve)

Discussione: #javascript Autoselezione dropdown in base a valore di altro campo

Strumenti discussione

Ricerca discussione

Visualizza

#javascript Autoselezione dropdown in base a valore di altro campo

Tag per questa discussione

Permessi di invio