Home > Enterprise >  How to reset Select box with Js?
How to reset Select box with Js?

Time：10-08

I'm trying to reset a select containing option. I tried several ways looking for stackoverflow but couldn't. I'm a fan, can someone help me understand what I'm doing wrong?

I managed to get the reset key to work for type number inputs, but not for select as you can see from fiddle: https://jsfiddle.net/snake93/ux28vde1/2/

// Material Select Initialization
$(document).ready(function() {
  $('.mdb-select').materialSelect();
});

// Reset
function resetFields() {
  document.getElementById("bmrcalc").reset();
  var selectsex = document.getElementById("select-sex");
  selectsex.selectedIndex = 0;
}
/*Arrow of dropdown & Input right*/

.caret {
  margin-left: 10px;
}

.select-wrapper input.select-dropdown {
  padding-right: 15px!important;
}

.select-dropdown.form-control {
  text-align: right;
  margin-right: 10px!important;
  color: #0d6efd;
}


/*Font*/

.select-dropdown.form-control,
.label-text {
  font-weight: 500;
  font-size: 15px !important;
}


/*Label Field*/

.label-text {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

.group-field {
  position: relative!important;
}


/*Dropdown opened top spacing*/

.dropdown-content.select-dropdown.w-100 {
  top: 42px!important;
}


/*Focus Within for Label & Input*/

.group-field.select-dropdown.form-control:focus-within {
  color: #0d6efd;
  background-color: #fff0;
  box-shadow: none !important;
  font-weight: 500 !important;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/mdb.min.css">

<!-- jQuery -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/mdb.min.js"></script>


<!----Input Field Bootstrap 4.6.0---->

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Peso</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="3" id="weight" name "weight1" form="bmrcalc">
  <span class="input-group-text">Kg</span>
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Altezza</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="3" id="height" name "height1" form="bmrcalc">
  <span class="input-group-text">Cm</span>
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Età</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="2" id="age" name "age1" form="bmrcalc">
  <span class="input-group-text">Anni</span>
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Bodyfat</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="2" id="bodyfat" name "bodyfat1" form="bmrcalc">
  <span class="input-group-text">%</span>
</div>

<div class="group-field">
  <label class="label-text">Sesso</label>
  <select class="mdb-select" id="select-sex">
    <option selected value="0">Seleziona</option>
    <option id="sexuomo" name="radios" value="Male" required class="sexbtn">Uomo</option>
    <option id="sexdonna" name="radios" value="Female" form="bmrcalc" required class="sexbtn">Donna</option>
  </select>
</div>

<div class="group-field">
  <label class="label-text">Lifestyle</label>
  <select class="mdb-select" id="select-lifestyle" name="activ_level" data-width="100%">

    <option selected value="0">Seleziona</option>

    <option class="opt" id="leggeros" name="radiosa" value="1.2" data-subtext="Stile di vita per lo più sedentario. Smart Working, studio, insegnante, pochi passi al giorno - (Moltiplicatore 1.2)" form="bmrcalc">Sedentario</option>

    <option class="opt" id="attivos" name="radiosa" value="1.375" data-subtext="Commessa, impiegato, attività fisica moderata, Corsa, fitness 1-3 Day x Week - (Moltiplicatore 1.375)">Leggero</option>

    <option class="opt" id="allenatos" name="radiosa" value="1.55" data-subtext="Cameriere, cuoco, camionista, allenamenti intensi, fitness, bodybuilding 3-4 Day x Week - (Moltiplicatore 1.55)">Moderato</option>

    <option class="opt" id="Mattivos" name="radiosa" value="1.75" data-subtext="Operaio edile, idraulico, meccanico, allenamenti intensi, bodybuilding, powerlifting - (Moltiplicatore 1.75)">Attivo</option>

    <option class="opt" id="Eattivos" name="radiosa" value="1.9" data-subtext="Lavoro più studio, atleta impegnato in competizioni o campionati, allenamenti intensi più di 4 Day x Week - (Moltiplicatore 1.9)">Estremamente attivo</option>
  </select>
</div>

<button onclick="resetFields()">Reset</button>
<form action="" id="bmrcalc"></form>

CodePudding user response：

  1. Always use empty string value for first options describing what user should do.

  2. You reset the value using

    $('.mdb-select').val("");


// Material Select Initialization
$(document).ready(function() {
  $('.mdb-select').materialSelect();
});

// Reset
function resetFields() {
  document.getElementById("bmrcalc").reset();
  $('.mdb-select').val("");
}
/*Arrow of dropdown & Input right*/

.caret {
  margin-left: 10px;
}

.select-wrapper input.select-dropdown {
  padding-right: 15px!important;
}

.select-dropdown.form-control {
  text-align: right;
  margin-right: 10px!important;
  color: #0d6efd;
}


/*Font*/

.select-dropdown.form-control,
.label-text {
  font-weight: 500;
  font-size: 15px !important;
}


/*Label Field*/

.label-text {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

.group-field {
  position: relative!important;
}


/*Dropdown opened top spacing*/

.dropdown-content.select-dropdown.w-100 {
  top: 42px!important;
}


/*Focus Within for Label & Input*/

.group-field.select-dropdown.form-control:focus-within {
  color: #0d6efd;
  background-color: #fff0;
  box-shadow: none !important;
  font-weight: 500 !important;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/mdb.min.css">

<!-- jQuery -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/mdb.min.js"></script>


<!----Input Field Bootstrap 4.6.0---->

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Peso</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="3" id="weight" name "weight1" form="bmrcalc">
  <span class="input-group-text">Kg</span>
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Altezza</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="3" id="height" name "height1" form="bmrcalc">
  <span class="input-group-text">Cm</span>
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Età</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="2" id="age" name "age1" form="bmrcalc">
  <span class="input-group-text">Anni</span>
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="txtfocus">Bodyfat</span>
  <input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="2" id="bodyfat" name "bodyfat1" form="bmrcalc">
  <span class="input-group-text">%</span>
</div>

<div class="group-field">
  <label class="label-text">Sesso</label>
  <select class="mdb-select" id="select-sex">
    <option selected value="">Seleziona</option>
    <option id="sexuomo" name="radios" value="Male" required class="sexbtn">Uomo</option>
    <option id="sexdonna" name="radios" value="Female" form="bmrcalc" required class="sexbtn">Donna</option>
  </select>
</div>

<div class="group-field">
  <label class="label-text">Lifestyle</label>
  <select class="mdb-select" id="select-lifestyle" name="activ_level" data-width="100%">

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

    <option class="opt" id="leggeros" name="radiosa" value="1.2" data-subtext="Stile di vita per lo più sedentario. Smart Working, studio, insegnante, pochi passi al giorno - (Moltiplicatore 1.2)" form="bmrcalc">Sedentario</option>

    <option class="opt" id="attivos" name="radiosa" value="1.375" data-subtext="Commessa, impiegato, attività fisica moderata, Corsa, fitness 1-3 Day x Week - (Moltiplicatore 1.375)">Leggero</option>

    <option class="opt" id="allenatos" name="radiosa" value="1.55" data-subtext="Cameriere, cuoco, camionista, allenamenti intensi, fitness, bodybuilding 3-4 Day x Week - (Moltiplicatore 1.55)">Moderato</option>

    <option class="opt" id="Mattivos" name="radiosa" value="1.75" data-subtext="Operaio edile, idraulico, meccanico, allenamenti intensi, bodybuilding, powerlifting - (Moltiplicatore 1.75)">Attivo</option>

    <option class="opt" id="Eattivos" name="radiosa" value="1.9" data-subtext="Lavoro più studio, atleta impegnato in competizioni o campionati, allenamenti intensi più di 4 Day x Week - (Moltiplicatore 1.9)">Estremamente attivo</option>
  </select>
</div>

<button onclick="resetFields()">Reset</button>
<form action="" id="bmrcalc"></form>

Page link：https//www.codepudding.com/Enterprise/144252.html

Prev:React - add or remove class on click
Next:Prevent HTML table row from being dragged to another table
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding