无法使用Jquery清除选择选项值

时间:2018-05-04 05:43:15

标签: jquery ajax selectize.js

我无法使用Jquery动态清除select选项值。我在下面解释我的代码。

report.php:

    <div class="col-sm-4">
    <select class="form-control selectized" data-live-search="true" name="cmbExamgrp" id="cmbExamgrp" onChange="selectExamType(this.value,'<?=$MY_SESSION_NAME?>')">
    <option value="">Select Exam Group</option>
        </select>
    </div>
<button type="button" class="btn btn-info tooltips" name="btnReset" id="btnReset" title="Reset"><i class="fa fa-filter"></i> Reset</button>

此处我还有重置按钮,可在单击时清除该字段。

report.js:

 function selectExamType(grpType,session){
        var data = {
            type:"SELECT_EXAM_TYPE",
            grpType:grpType,
            _s:session
        };
        $.ajax({
            url:"exam_registrant_report_db.php",
            mType:"get",
            data:data,
            success:function(response){         
                var option_arr = new Array();
                var options = "";       
                $('#cmbExamtype').selectize()[0].selectize.destroy();   
                var select = $('#cmbExamtype').selectize(options); 
                var selectize = select[0].selectize;                            
                var res1 = JSON.parse(response);                    
                $.each(res1.aaData,function(i,data){
                    var option_arr = ({value:data.exam_type,text:data.exam_type});
                    selectize.addOption(option_arr);
                    //if(i == 0)
                    //  selectize.setValue(data.exam_type);
                }); 
                var examType = $('#cmbExamtype').val(); 
                selectExamName(examType,session);
                selectZone(session);
            },
            error:function()
            {
                alert("We are unable to Process.Please contact Support");
            }
        });
    }
    $('#btnReset').click(function(){
        $('#cmbExamtype').selectize()[0].selectize.destroy();
    })

这里我为选择字段添加值。我的要求是用户点击&#34;重置&#34;按钮该字段应该清除哪些在我的情况下没有发生,在这里我使用selectize.js.Please帮我解决这个问题。

3 个答案:

答案 0 :(得分:0)

试试这个documentation

$('#cmbExamtype')[0].selectize.clear();

答案 1 :(得分:0)

如果您运行以下示例,当“select”元素设置为“volvo”时,jQuery代码将在您点击“重置”按钮时清除选择:

$("#btnReset").click(function() {
  $("#myid option:selected").prop("selected", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
		<select id="myid">
      <option value="">Select None</option>
      <option value="volvo" selected>Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
	</div>
  <button type="button" class="btn btn-info tooltips" name="btnReset" id="btnReset" title="Reset"><i class="fa fa-filter"></i> Reset</button>
</body>
</html>

答案 2 :(得分:0)

正如评论中所讨论的那样尝试使用:

<form>
 <div class="col-sm-4">
    <select class="form-control selectized" data-live-search="true" name="cmbExamgrp" id="cmbExamgrp" onChange="selectExamType(this.value,'<?=$MY_SESSION_NAME?>')">
    <option value="">Select Exam Group</option>
    <option value="">Test</option>
        </select>
    </div>
<button type="reset" class="btn btn-info tooltips" name="btnReset" id="btnReset" title="Reset"><i class="fa fa-filter"></i> Reset</button>
</form>

https://www.w3schools.com/code/tryit.asp?filename=FQZ0TITVYI2C