清除材料设计下拉值会导致错误

Question

我正在使用引导材料设计来显示带有它们值的下拉列表。我需要使用 JQuery 或任何其他方法清除所选值，因为我尝试执行的操作导致了错误。我浏览了 md bootstrap 的文档，但没有任何运气。HTML代码<div class="form-group">        <label for="ddID">Select list:</label>        <select id="ddID" class="selectpicker mdb-select md-form" required>            <option value="" disabled selected></option>            <option value="1">1</option>            <option value="2">2</option>            <option value="3">3</option>            <option value="4">4</option>            <option value="5">5</option>        </select>  </div>查询**1st attempt**function clear_value() {  $('#ddID').removeAttr('required');  $('#ddID').val(''); }**2nd attempt**function clear_value() {  $("#ddID").material_select("destroy");  $("#ddID").material_select(); }**3rd attempt**function clear_value() {  $('select.mdb-select').materialSelect({ destroy: true }); }**4th attempt**function clear_value() {  $(".active").removeClass(); }错误Uncaught TypeError: Cannot read property 'setAttribute' of null    at Object.applyStyleOnLoad [as onLoad] (applyStyle.js:66)    at index.js:69    at Array.forEach (<anonymous>)    at new Popper (jq.js:67)    at Dropdown.toggle (dropdown.js:176)    at HTMLInputElement.<anonymous> (dropdown.js:267)    at HTMLInputElement.dispatch (jquery-3.4.1.min.js:2)    at HTMLInputElement.v.handle (jquery-3.4.1.min.js:2)

Answer 1

您可以选择第一个选项并将其selected属性更改为 true ，如下所示：

function clear_value() {

  $('#ddID option[value=""]').prop('selected', true);

}

$('#clear').on('click', (e) => {

  e.preventDefault();

  

  clear_value();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">

        <label for="ddID">Select list:</label>

        <select id="ddID" class="selectpicker mdb-select md-form" required>

            <option value="" disabled selected></option>

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option>

        </select>  

</div>

<button id="clear">Clear Value</button>