如何使用查询将选定的属性传递到 html 中的下拉列表

Question

 <select    multiple="multiple" name="colors[]" id="color">
    <option value="" >choose color</option>
    <option value="black"   >Black</option>
    <option value="white" >White</option>
    <option  value="green" >Green</option>
    <option  value="red" >red</option>
  </select>

在这个下拉列表中，我想传递选定的属性
例如：

<option  value="red" selected >red</option> 

使用 jquery 以及如何通过设置多个 select

<option  value="red" selected >red</option> 
<option  value="white" selected >white</option> 

如果我的 colors 值来自一个数据库，例如：yellow,blue 如何存储以存储在该数据库中 mycode：var colorstoadd=yellow,blue

$("#color").find('input[type="select"]').append('<option value='+colorstoadd+ 'selected'+'>'+colorstoadd+'</option>')

Answer 1

如果您从数据库返回的数据如"yellow, red, green";

您可以使用下一个代码

• 使用.split(',')拆分 colors
• 使用.each split后，循环遍历 colors 的数组
• 使用.trim()避免任何左/右空格

 let colorstoadd = "yellow, red, green"; $.each(colorstoadd.split(','), (i, color) => { $("#color").append('<option value="'+color.trim()+'" selected>'+color.trim()+'</option>') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple="multiple" name="colors[]" id="color"> <option value="" >choose color</option> <option value="black" >black</option> </select>

额外的

• 要检查下拉菜单中是否已存在颜色，请使用if($("#color option[value='"+color+"']").length)
• 添加选中的属性$("#color option[value='"+color+"']").attr("selected", true);

 let colorstoadd = "yellow, red, green"; $.each(colorstoadd.split(','), (i, color) => { if($("#color option[value='"+color.trim()+"']").length){ $("#color option[value='"+color.trim()+"']").attr("selected", true); }else{ $("#color").append('<option value="'+color.trim()+'" selected>'+color.trim()+'</option>') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple="multiple" name="colors[]" id="color"> <option value="" >choose color</option> <option value="black" >black</option> <option value="red" >RED</option> </select>