如何用Js重置Select框？
How to reset Select box with Js?
我正在尝试重置 select 包含的选项。我尝试了几种寻找 Whosebug 的方法，但没有成功。我是粉丝，有人可以帮助我理解我做错了什么吗？
我设法让重置键适用于类型号输入，但不适用于 select，正如您从 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>
始终对描述用户应该做什么的第一个选项使用空字符串值。
您使用
重置了值
$('.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>
我正在尝试重置 select 包含的选项。我尝试了几种寻找 Whosebug 的方法，但没有成功。我是粉丝，有人可以帮助我理解我做错了什么吗？
我设法让重置键适用于类型号输入，但不适用于 select，正如您从 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>
始终对描述用户应该做什么的第一个选项使用空字符串值。
您使用
重置了值$('.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>