Setting attribute 'selected' to an option not working neither with jQuery nor with vanilla js

Question

I have a select, the select accepts multiple options (2 max):

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <select class="selectpicker" multiple data-max-options="2"> <option id="s1" value="Mustard Heinz">Mustard Heinz</option> <option id="s2" value="Ketchup Heinz">Ketchup Heinz</option> <option id="s3" value="Relish Whatever">Relish Whatever</option> </select>

From my back-end, I receive a String like this:

['Mustard Heinz', ' Ketchup Heinz']

So what I want is that, when the page loads, Mustard Heinz and Ketchup Heinz will be selected.

What I've tried:

vanilla js approach :

document.addEventListener("DOMContentLoaded", function() {
    var selected_sauces = "['Mustard Heinz', ' Ketchup Heinz']" //string from backend
    if (selected_sauces.includes("Mustard Heinz")){
        var s1 = document.getElementById(s1);
        s1.setAttribute('selected', 'selected');
    }
    if (selected_sauces.includes("Ketchup Heinz")){
        var s2 = document.getElementById(s2);
        s2.setAttribute('selected', 'selected');
    }
    if (selected_sauces.includes("Relish Whatever")){
        var s3 = document.getElementById(s3);
        s3.setAttribute('selected', 'selected');
    }
});

jQuery approach :

$(document).ready(function() {
    var selected_sauces = "['Mustard Heinz', ' Ketchup Heinz']" //string from backend
    if (selected_sauces.includes("Mustard Heinz")){
        $('#s1').prop({defaultSelected: true});
    }
    if (selected_sauces.includes("Ketchup Heinz")){
        $('#s2').prop({defaultSelected: true});
    }
    if (selected_sauces.includes("Relish Whatever")){
        $('#s3').prop({defaultSelected: true});
    }
});

Answer 1

When you use document.getElemendById() , you need to put your id in some single or double quote like this document.getElemendById('s1') .

Here is an example:

 var selected_sauces = "['Mustard Heinz', ' Ketchup Heinz']" //string from backend if (selected_sauces.includes("Mustard Heinz")){ var s1 = document.getElementById('s1'); s1.setAttribute('selected', 'selected'); } if (selected_sauces.includes("Ketchup Heinz")){ var s2 = document.getElementById('s2'); s2.setAttribute('selected', 'selected'); } if (selected_sauces.includes("Relish Whatever")){ var s3 = document.getElementById('s3'); s3.setAttribute('selected', 'selected'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <select class="selectpicker" multiple data-max-options="2"> <option id="s1" value="Mustard Heinz">Mustard Heinz</option> <option id="s2" value="Ketchup Heinz">Ketchup Heinz</option> <option id="s3" value="Relish Whatever">Relish Whatever</option> </select>

Answer 2

The same approach as #Imperyum answer works for JQuery as well.

if you don't emit the

$(document).ready(function() {})

line it won't work.

 var selected_sauces = "['Mustard Heinz', ' Ketchup Heinz']"; //string from backend if (selected_sauces.includes("Mustard Heinz")){ $('#s1').prop('selected', 'selected'); } if (selected_sauces.includes("Ketchup Heinz")){ $('#s2').prop('selected', 'selected'); } if (selected_sauces.includes("Relish Whatever")){ $('#s3').prop('selected', 'selected'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <select class="selectpicker" multiple data-max-options="2"> <option id="s1" value="Mustard Heinz">Mustard Heinz</option> <option id="s2" value="Ketchup Heinz">Ketchup Heinz</option> <option id="s3" value="Relish Whatever">Relish Whatever</option> </select>