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

【问题标题】：Can not clear select option value using Jquery无法使用 Jquery 清除选择选项值
【发布时间】：2018-10-14 12:40:05
【问题描述】：

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

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();
    })

我在这里为选择字段添加值。我的要求是当用户单击“重置”按钮时，该字段应清除，这在我的情况下没有发生，这里我正在使用 selectize.js。请帮我解决这个问题。

【问题讨论】：

@subra 尝试使用
和 html 按钮类型=重置。您不需要添加额外的脚本来清除该字段
是的，我正在使用表单。我只给出了选择选项代码。
然后使用
我设置了类型重置但同样的问题。

标签： jquery ajax selectize.js

【解决方案1】：

如 cmets 中所述尝试使用：

<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

【讨论】：

其中p 存在意味着$("p").click(function(){ $(this).hide(); }); 已写入但我不明白。
@subra 我没有提到 $("p").click(function(){ $(this).hide(); });在我的回答中。我只是在这里使用 HTML 默认重置按钮功能

【解决方案2】：

试试这个documentation

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

【讨论】：

我按照你的要求做了，但是这个Uncaught TypeError: $(...).selectize(...)[0].clear is not a function 错误即将到来。
尝试删除 [0] 索引并通过 console.log($('#cmbExamtype').selectize()) 检查您的选择器是否正确
我删除 [0] 并签入控制台，但没有找到清除选项的位置。
使用它并在正确的 "#cmbExamtype" $('#cmbExamtype')[0].selectize.clear(); 中确认您的输入 id；
它的$("#cmbExamtype").selectize()[0].selectize.clear(); 正在工作。

【解决方案3】：

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

$("#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>

【讨论】：