为什么我无法使用此代码设置多选择下拉菜单？

问题描述：

opts是一个数组[“1”，“2”]。选择选项未被选中。下拉是一个引导多选插件。我在这里错过了什么？为什么我无法使用此代码设置多选择下拉菜单？

var data = {}; 
data.action = "get-form-data"; 
data["account-id"] = localStorage.getItem("account-id"); 
ajax('post', 'php/enablers.php', data, formDataSuccess); 
function formDataSuccess(data) { 
    data = JSON.parse(data); 
    $("#min-rating").val(data.MinRating); 
    debugger; 
    var opts = data.AcceptedMedia.split(","); 
    $.each(opts, function(inx,val){ 
     $('#accepted-media option[value=' + val + ']').attr('selected', true);   
    }) 
    $("#special-instructions").val(data.SpecialInstructions); 
}

HTML

<html lang="en"> 
    <head> 
     <title>Writer's Tryst - Enablers Form</title> 
     <link type="text/css" href="css/enablers.css" rel="stylesheet" /> 
     <link rel="stylesheet" href="css/bootstrap-multiselect.css"> 
     <link rel="stylesheet" href="css/jquery.rateyo.min.css"> 
     <style> 
      select { 
       padding-bottom: 8px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container center_div"> 
      <img id="img-enablers" src="#" alt="images" /> 
      <form id = "form-enablers" class="form-horizontal well"> 
       <h1>Enablers</h1>    
       <p> 
        <label for="form-type" class="fixed50">Form:</label> 
        <select id="form-type" name="form-type[]" class="btn btn-outline" multiple="multiple" required> 
        </select> 
       </p> 
       <p> 
        <label for="genres" class="fixed50">Genres:</label> 
        <select id="genres" name="genres[]" multiple="multiple" required> 
        </select><br/> 
       </p> 
       <p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p> 
       <p> 
        <label for="accepted-media" class="fixed50">Accepted Media:</label> 
        <select id="accepted-media" name="accepted-media[]" multiple="multiple" required> 
         <option value='1'>Mail</option> 
         <option value='2'>PDF File</option> 
        </select><br/> 
       </p> 
        <label for="min-rating" class="fixed50">Minimum Rating:</label> 
        <div id="min-rating"></div> 
       <p> <label for="special-instructions" class="fixed50">Special Instructions:</label> 
        <textarea id ="special-instructions" name="special-instructions"></textarea> 
       </p> 
       <p class="thumbnail">For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p> 
       <p id="recaptcha-elements"></p> 
       <div class="form-group">  
        <button type="submit" id="enablers-search" class="btn btn-success btn-lg btn-block glyphicon glyphicon-search"> Search</button> 
       </div> 
       <input id="userid" name="userid" type="hidden" /> 
      </form> 
     </div> 
     <form id="writers-list"> 
      <p id="manuscript-request">To request a manuscript, click the checkbox beneath the thumbs-up icon.</p> 
      <div id="table-list"></div> 
      <div id="main" class="content"></div> 

     </form> 
     <script src="js/bootstrap-multiselect.js"></script> 
     <script src="js/jquery.rateyo.js"></script> 
     <script src="js/enablers.js"></script> 
     <script src="js/recaptcha.js"></script> 
    </body>       
</html>

如何添加HTML所以我们可以确定您的目标是正确的元素？ –

我发布了HTML –

它适用于我：https://jsfiddle.net/barmar/0obu9zqL/7/ – Barmar

答

由于<select multiple>val()是阵列...这是简单只需设置<select>值，而不是循环的选项

$('#accepted-media').val(opts)

DEMO

这不完全相同。他的代码选择其他选项，但不会取消选择其他选项。您的代码将取消选择选项。 – Barmar

这是我尝试的第一件事。它仍然不会设置选定的值。关于这里可能发生什么的任何想法？ –

@Barmar我没有看到那个特定的选择 – charlietfl

为什么我无法使用此代码设置多选择下拉菜单？

相关推荐