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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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  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});
    }
});

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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  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>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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  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>