將屬性“selected”設置為既不適用於 jQuery 也不適用於 vanilla js 的選項

Question

我有一個 select，select 接受多個選項（最多 2 個）：

 <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>

從我的后端，我收到一個這樣的String ：

['Mustard Heinz', ' Ketchup Heinz']

所以我想要的是，當頁面加載時，將選擇Mustard Heinz和Ketchup Heinz 。

我試過的：

香草js方法：

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 方法：

$(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

當您使用document.getElemendById()時，您需要將您的 id 放在一些單引號或雙引號中，例如document.getElemendById('s1') 。

這是一個例子：

 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

與#Imperyum 答案相同的方法也適用於 JQuery。

如果你不發出

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

行不行。

 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>