Как очистить данные с помощью кнопки reset?

Question

[Alex_87]

Добрый день! Подскажите пожалуйста, почему у меня не получается очистить поля. Вот мой код:

<div class="col-md-3">
     <div class="form-group">
            <select name="group_code" class="form-control select2" style="width: 100%;">
                     <option selected="">All groups</option>
                     <option value="" selected=""></option>
                     <option value="" selected=""></option>
                     <option value="fwf">fwf</option>
                     <option value="" selected=""></option>
                     <option value="3320">3320</option>
                      <option value="3309">3309</option>
                       <option value="5911">5911</option>
                   </select>
        </div>
</div>
...
<div class="box-footer">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-default" onclick="$('input, .box-body 
                              select').val('').removeAttr('selected').removeAttr('checked')">Reset</button>
    </div>

Comments

[wisgest]

Более правильно не
<form><button type="reset" onclick="...">
, а
<form onreset="..."><button type="reset">

Answer 1

[Andrew]

Форма где?
Reset подвязывается к полям формы и чистит их( также как сабмит отправляет)

Код

<form>
<div class="col-md-3">
     <div class="form-group">
            <select name="group_code" class="form-control select2" style="width: 100%;">
                     <option selected="">All groups</option>
                     <option value="" selected=""></option>
                     <option value="" selected=""></option>
                     <option value="fwf">fwf</option>
                     <option value="" selected=""></option>
                     <option value="3320">3320</option>
                      <option value="3309">3309</option>
                       <option value="5911">5911</option>
                   </select>
        </div>
</div>
...
<div class="box-footer">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-default" onclick="$('input, .box-body 
                              select').val('').removeAttr('selected').removeAttr('checked')">Reset</button>
    </div>
</form>

Comments

[Alex_87]

Хорошее замечание, благодарю! Я по ошибки не поставил блок в форму. А дальше что делать? Что нужно задать форме, чтобы все очищалось?
Все input очищаются! Только select не хочет

[Andrew]

Alex_87, он и не должен очищаться, скидывается на дефолтный опшн
https://codepen.io/kickerock/pen/rNNvYOo

[Alex_87]

Andrew, а у меня ничего никуда не скидывается. Что я выбираю - то и остаётся.

[Andrew]

Alex_87, может всё-таки вы выбираете тот у которого аттрибут "selected" есть?
дефолтный - стоит читать как, там где есть "selected", если нет - то первый