为什么我不能使用此代码设置多选下拉列表？

opts is an array ["1","2"]. The select options are not selected. The dropdown is a bootstrap multiselection plugin. What am I missing here?

opts是一个数组[“1”,“2”]。未选择选择选项。下拉列表是一个bootstrap multiselection插件。我在这里想念的是什么?

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>

1 个解决方案

#1

Since val() of <select multiple> is array... it is simpler to just set the <select> value instead of looping the options

由于值而不是循环选项更简单

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

DEMO

#1