select多选下拉全选问题

开发后台的是时候用到多选下拉列表，但下拉列表的项要全选才能提交数据，于是再点保存按钮的时候加两个jq全选下拉列表项，不动下拉列表的时候没有问题，，点保存就会全选下拉列表，但如果手动选择了下拉列表中的其中一项，或者删除其中一项，点保存就没法全选下拉列表，不知道是什么问题，求大神帮看一下，下面是部分代码

<form action="?action=save" method="post" id="myform" name="myform" enctype="multipart/form-data">
<select multiple="multiple" name="duotu[]" class="common-select-multiple" id="duotu">
    <option value="/uploads/image/20190717/20190717064658_56532.jpg">/uploads/image/20190717/20190717064658_56532.jpg</option>
    <option value="/uploads/image/20190717/20190717064658_22694.jpg">/uploads/image/20190717/20190717064658_22694.jpg</option>
    <option value="/uploads/image/20190717/20190717064658_35757.jpg">/uploads/image/20190717/20190717064658_35757.jpg</option>
    <option value="/uploads/image/20190717/20190717064658_95940.jpg">/uploads/image/20190717/20190717064658_95940.jpg</option>
</select>
<input id="savebutton" class="botton-common" value="保存" type="submit">
</form>

<script type="text/javascript">
$(function() {
    //保存时全选
    $("#savebutton").click(function(){
        $("#duotu option").attr("selected","selected");
    });
});
</script>

因为你虽然让option的selected值改变了，但是select的值还是你鼠标点击时候的值，可以使用console.log（$("select").val()）输出一下select的值看看

1.你点击的时候debug看看它们的属性都是什么
2.你的业务是提交必须全选，那你为什么还要设置可选，直接显示全部就可以了
2.如果不是必填，也应该是全选和非全选，为什么还可以选中/不选中其中一个呢

$(function() {
    //保存时全选
    $("#savebutton").click(function(){
        $("#duotu option").attr("selected","selected");
        var select = document.getElementById("duotu");
        var str = [];
        for(i=0;i<select.length;i++){
            if(select.options[i].selected){
                str.push(select[i].value);
            }
        }
        alert(str);
    });
});