11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Select option basé sur des boutons radios

Bonsoir,

J'ai un petit soucis avec ce code. Au chargement de la page, le bouton "vert" est coché par défaut et je devrais obtenir dans le menu déroulant : raisin, pastèque, pomme, banane. En réalité, je trouve les fruits rattachés au bouton "Jaune". Quand je clique sur les boutons, j'obtiens les bonnes valeurs. Comment obtenir les bonnes valeurs du bouton "vert " coché ? Merci pour votre aide.


    <input type="radio" value="green"  id="green"  name="panier" checked> vert
    <input type="radio" value="red"  id="red"  name="panier"> rouge
    <input type="radio" value="yellow" id="yellow"  name="panier"> jaune
        
    <select name=fruit>
    <option class=green>Raisin</option>
    <option class=green>Pastèque</option>
    <option class="red green yellow">Pommes</option>
    <option class="red">Cerise</option>
    <option class="red">Fraise</option>
    <option class="green yellow">Banane</option>
    <option class=yellow>Citrons</option>
    </select>


Et le Javascript


    <script>
        var fruit = $("[name=fruit] option").detach()
        $("[name=panier]").change(function() {
        var val = $(this).attr('id');
        $("[name=fruit] option").detach()
        fruit.filter("." + val).clone().appendTo("[name=fruit]")
        }).change()
    </script>

Modifié par daggoon (28 Jan 2021 - 22:23)
connecté
Modérateur
Salut,


Si tu log ta variable val tu vas voir :
green
red
yellow

dans la console.
Et si tu change l'ordre des 3 inputs :
<input type="radio" value="green"  id="green"  name="panier" checked> vert
<input type="radio" value="yellow" id="yellow"  name="panier"> jaune
<input type="radio" value="red"  id="red"  name="panier"> rouge

ca donnera :
green
yellow
red

dans la console.
Partant de là je pense que tu vois le soucis... L'initialisation :
$("[name=panier]") [bla bla] .change()
s'applique aux 3 inputs coup après coup et fini sur yellow. Il aurait fallu cibler l'element "checked".

Sinon, je ne suis pas un expert en Js mais tu peux peut etre faire une fonction pour le setup de ton select et en profiter pour faire une init en dur dans le js :

var fruit = $("[name=fruit] option").detach();
setSelectValues('red');

$("[name=panier]").change(function() {
  var val = $(this).attr('id');
  setSelectValues(val);
})

function setSelectValues(val) {
  console.log(val);
  $("[name=fruit] option").detach();
  fruit.filter("." + val).clone().appendTo("[name=fruit]");
}

https://jsfiddle.net/undless/dpmzn4L2/

En espérant t'avoir avancé,

Bonne soirée
Meilleure solution
Bonjour Laurent,

Merci beaucoup pour ton aide. J'ai résolu mon soucis avec ta proposition de fonction setSelectValues. Je l'ai utilisée également pour un autocomplete basé sur des boutons radio.

Bon week-end.
Sujet clos
Aller à