如何从下拉列表复选框中删除选定的项目

时间:2020-02-08 08:59:51

标签: javascript jquery

我正在使用此引导程序下拉列表通过复选框进行选择,所有这些都很好,只是想在创建新记录以删除所选项目并使其保持未选中状态后成功添加。

             <select class="test" name="roles[]" id="roles" multiple>
              <option value="1">item1</option>
               <option value="2">item2</option>
              <option value="3">item3</option>       
             </select>

jQuery:

     $('#SubmitCreateForm').click(function(e) {    
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: $('#archiveurl').attr('href'),
            method: 'post',
            data: $("#createform").serialize(),

            success: function(result) {
                     $('#roles').find('option').remove().end(); // I tried this but not work!      
                }
            }
        });
     });

我正在将此插件用于下拉列表中的此类复选框

https://github.com/mgibbs189/fSelect

enter image description here

3 个答案:

答案 0 :(得分:1)

这里:

success: function(result) {
   $('#roles').find('option').remove().end(); // I tried this but not work!      
}

您没有指定要删除的“选项”。试试这个:

$("#roles option[value='X']").remove();

答案 1 :(得分:0)

不是真正的复选框,而是import android.telephony.TelephonyManager; switch (info.getSubtype()) { case TelephonyManager.NETWORK_TYPE_EDGE: return "2G"; // ~ 50-100 kbps case TelephonyManager.NETWORK_TYPE_HSDPA: return "3G"; // ~ 2-14 Mbps case TelephonyManager.NETWORK_TYPE_LTE: return "4G"; // ~ 10+ Mbps case TelephonyManager.NETWORK_TYPE_UNKNOWN: return "unknown"; // is connected but cannot tell the speed default: return "none"; } ,因此您可以像下面这样取消选择:

select option
window.fs_test = $('.test').fSelect();

//

$('#button').click(function() {
  $('#roles option').prop('selected', false)
  $('.fs-option').removeClass('selected')
});
select {
    position: absolute;
    right: 0;
    display: block!important;
}

已更新:

正如您所提到的,您正在使用哪个插件,在我检查之后,可以说没有取消选中状态的本机方法,它不是高级插件,有点弱!它甚至不支持来自本机元素的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script> <link rel="stylesheet" href="https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css"> <select class="test" name="roles[]" id="roles" multiple> <option value="1" selected>item1</option> <option value="2" selected>item2</option> <option value="3" selected>item3</option> </select> <button id="button">Uncheck</button>数据,所以我做到了,从列表中删除了attr类。

selected

答案 2 :(得分:0)

要从标签中删除所选选项,请对所选选项应用remove()函数:$(“#roles”)。children('option:selected')。remove();

$(document).ready(function(){
		$("#roles").on('change',function(){
    $(this).children('option:selected').remove();
  });
});
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<select class="test" name="roles[]" id="roles" multiple>
              <option value="1">item1</option>
               <option value="2">item2</option>
              <option value="3">item3</option>
             </select>
</body>

</html>