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

Question

我正在使用 bootstrap material 设计来显示包含其值的下拉列表。我需要使用 JQuery 或任何其他方法清除所选值，因为我尝试执行的操作导致错误。

我浏览了 md bootstrap 的文档，但没有任何运气。

HTML code

<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>

JQuery

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

Error

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

您可以 select 第一个选项并将其 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>

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

Clearing material design dropdown values results in an error

javascript

jquery

twitter-bootstrap

material-design

dropdown