将属性“selected”设置为不适用于jQuery或vanilla的选项

Question

我有一个选择，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。

我试过的是：

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

当您使用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>

​