0

I have two select box in a modal Boostrap:

<select name="event_status" id="event_status" class="form-control mb-1" required>
    <option value="in progress">in progress</option>
    <option value="ended">ended</option>
</select>

<select name="event_picto" id="event_picto" class="form-control mb-1" required>
    <option value="" disabled selected>traffic status...</option>
    <option value="img/eventgreen.svg">normal</option>
    <option value="img/eventyellow.svg">under conditions</option>
    <option value="img/eventred.svg">closed</option>
</select>

i would like that if option value "ended" is selected so option value of second select box is set to "normal".

i try this but no change :

$("#event_status").change(function() {
    var val = $(this).val();
    if (val == "ended") {
        $("event_picto").html("<option value='img/eventgreen.svg'>normal</option>");
    }
}
Steven Savior
  • 1
  • 2
  • Typo. The selector is missing the `#` character. – David Aug 27 '21 at 14:17
  • 1
    You set the value in a similar way to get the value: `$("event_picto").val("img/eventgreen.svg")` - if you use `.html` you replace the entire content - ie remove all the other ` – freedomn-m Aug 27 '21 at 14:19
  • i miss # character, but if use this there are no change : `$("#event_picto")val("img/eventgreen.svg");` – Steven Savior Aug 27 '21 at 14:26
  • @StevenSavior: Another typo, the call to `.change()` is never closed. This is a syntax error and would be reported on your browser's development console. Always check there first. – David Aug 27 '21 at 14:39
  • It seems to work fine in a JSFiddle https://jsfiddle.net/0y86Lmh7 – 3limin4t0r Aug 27 '21 at 14:43
  • Solved with this. Thanks to all : `if (val == "Terminé") { $('#event_picto > option[value="img/eventgreen.svg"]').attr("selected", true); }` – Steven Savior Sep 07 '21 at 13:25

0 Answers0