单击按钮后，下拉列表将重置

Question

我有这个脚本：

$(function () {
    /* function for dynamic numbering */
    function updateRowOrder() {
        $('td.id').each(function (i) {
            $(this).text(i + 1);
        });
    }

    /* if input textValue get press keyboard enter */
    $("#textValue").keydown(function (e) {
        if (e.keyCode == 13) {
            /* if get so trigger to addBtn */
            $("#addBtn").trigger("click");
            $(this).val("");
        }
    });

    $(document).on("click", "#addBtn, .delRow ", function (e) {
        /* if document clicked is addBtn */
        if ($(this).is("#addBtn")) {
            /* Append template script to table tbody */
            $($("#template").html()).appendTo("#dataTables-example tbody");
            /* Append textValue value to class rowValue and change classname */
            $(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
            $(".taskValue").append($("#task").val()).attr("class", "taskValues");
            $(".roleValue").append($("#role").val()).attr("class", "roleValues");
            var appendComma = ($(".roleValue1").val() == '') ? '' : ' , ';
            $(".roleValue1").append(appendComma + $("#id_select").val()).attr("class", "roleValues");
            /* Update Numbering */
           updateRowOrder();
        }
        else {
            /* Just remove the tr on the click of a mouse */
            $(this).closest("tr").remove();
            /* Update Numbering */
            updateRowOrder();
        }

        $('.up, .down').click(function(e){
            e.preventDefault();

            var row = $(this).parents("tr:first"); 
            //selects all of row's tds except position number 

            // var row = $(this).parents("tr:first");
            // selects the entire row

            if ($(this).is(".up")) {
                row.insertBefore(row.prev());
            } 
            else if ($(this).is(".down")){
                row.insertAfter(row.next());
            }
            else{

            }
            $('tbody tr[class="move"] td:first-child').each(function(idx, item) {
                $(this).text(idx+1);
            });
        });
        /* clearing input textValue */
        $("#textValue").val("");
        $('select option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected');
    });
});

我在这里包括当addBtn点击下拉o select标记将重置为其默认值。此代码：

$('select option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected');

这是我的示例表：

<table class="table table-bordered" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <td>Activity</td>
                                            <td><input type="text" id="textValue" class="typeahead form-control"/></td>
                                        </tr>
                                        <tr>
                                            <td>Task Code</td> 
                                            <td>
                                                <select name="" id="task" class="selectpicker form-control">
                                                    <option value="default" disabled="disabled" selected="selected">Default</option>
                                                    <?php
                                                    foreach($tasktype as $task)
                                                    {
                                                        ?>
                                                        <option value="<?=$task['TaskCode']?>"><?=$task['TaskCode']?></option>
                                                        <?php
                                                    }
                                                    ?>
                                            </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Primary Role Code</td>
                                            <td>
                                                <select name="" id="role" class="selectpicker form-control">
                                                    <option value=""></option>
                                                    <?php
                                                    foreach($rolecode as $role)
                                                    {
                                                        ?>
                                                        <option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
                                                        <?php
                                                    }
                                                    ?>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Secondary Role Code</td>
                                            <td>
                                                <select id="id_select" class="selectpicker form-control" multiple data-live-search="true">
                                                    <?php
                                                    foreach($rolecode as $role)
                                                    {
                                                        ?>
                                                        <option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
                                                        <?php
                                                    }
                                                    ?>
                                              </select>
                                            </td>
                                        </tr>
                                    </thead>
                                </table>
                                <button type="button" class="btn btn-primary" id="addBtn"><i class="fa fa-plus fa-fw"></i>Add</button>

当我尝试它时，我选择值，然后点击添加按钮，但它仍然没有重置，而是显示我选择的一个。而当我在下拉列表中没有选择任何内容而再次添加时，该值为空或无值。我认为它在后端工作，但在我显示的一个不工作。有人告诉我问题出在哪里吗？

Answer 1

function displaymessage() {
$("select").each(function() { this.selectedIndex = 0 });}

这将重置下拉值为索引号0。

Answer 2

在选项上设置select属性上的值，而不是selected属性上的值。