javascript - 如何用 Js 重置选择框?
问题描述
我正在尝试重置选择包含选项。我尝试了几种寻找stackoverflow的方法,但不能。我是粉丝,谁能帮我理解我做错了什么?
我设法让重置键用于类型号输入,但不能用于选择,正如您从小提琴中看到的那样: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>
推荐阅读
- html - 如何让响应式图像与 gatsby 一起使用?
- haskell - 调用 GHC API 时出现警告“hptSomeThingsBelowUs 中的警告,缺少模块……”的原因是什么以及如何摆脱它?
- git - 如何使用 meld(或其他 difftool / mergetool)选择性地集成 git 中两个不相关存储库(远程)之间的更改?
- r - 使用 ggplot 在 R 中绘制地形底图(没有 Google API 密钥)
- java - 错误 - 位于加载程序 org.springframework.boot.devtools.restart.classloader.RestartClassLoader @74b715ff 的未命名模块中
- javascript - 无法显示倒计时差异Javascript的输出
- regex - 关于迭代数据框和应用正则表达式的任何想法?
- javascript - Auth0 中断 Next.js -- 当页面使用 withPageAuthRequired HOC 包装时,pageProps 为空
- c++ - 我似乎找不到抛出异常的问题:写访问冲突。素数是 0x828753A3。C++
- ios - 如何编程 UIButton 根据动态大小标签的高度向上移动