使用Javascript操作表单中的选项
使用Javascript操作表单中的选项
提问于 2018-09-26 08:40:55
我用谷歌搜索了很多，但我在JS和HTML方面还是个新手。我有一个我不能解决的问题。
我确实有那个html表单(希望我复制正确)：
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Geschlecht</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="s_radio" id="s_radio1" value="m" checked="checked">
<label class="form-check-label" for="s_radio1">
Männlicher Körper
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="s_radio" id="s_radio2" value="f">
<label class="form-check-label" for="s_radio2">
Weiblicher Körper
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Körperfettanteil</legend>
<div class="col-sm-10">
<div class="form-check">
<select class="form-control" id="kfaform">
<option value="3.5">3-4 %</option>
<option value="6.5">6-7 %</option>
<option value="11">10-12 %</option>
<option value="15">15 %</option>
<option value="20">20 %</option>
<option value="25">25 %</option>
<option value="30">30 %</option>
<option value="35">35 %</option>
<option value="40">40 %</option>
</select>
</div>
</div>
</div>
</fieldset>第一个单选按钮是选中标准的，控件窗体中的选项就是这样。
但是，如果用户选中了第二个单选按钮，则表单应该包括其他选项，如：
<option value="11">10-12 %</option>
<option value="16">15-17 %</option>
<option value="21">20-22 %</option>
<option value="25">25 %</option>
<option value="30">30 %</option>
<option value="35">35 %</option>
<option value="40">40 %</option>
<option value="45">45 %</option>
<option value="50">50 %</option>并且应该删除之前表单中的选项。
非常重要:它必须是双向的，这意味着如果您再次单击第一个单选按钮，它应该会更改回第一个状态。
希望你能理解我的问题。
我非常感谢你的每一条建议。
提前谢谢你！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-26 09:05:18
我已将类添加到您的选项列表中。然后，我使用JS监听您的单选按钮的点击，并相应地隐藏和显示相应的选项：
function start() {
setMannOptions();
//
document.getElementById("s_radio1").addEventListener("click", function() {
setMannOptions();
});
document.getElementById("s_radio2").addEventListener("click", function() {
setWeibOptions();
});
}
function setMannOptions() {
var weib = document.getElementsByClassName("weib");
if (weib) {
for (x = 0; x < weib.length; x++) {
weib[x].style.display = "none";
}
}
//
var mann = document.getElementsByClassName("mann");
if (mann) {
for (x = 0; x < mann.length; x++) {
mann[x].style.display = "block";
}
}
}
function setWeibOptions() {
var mann = document.getElementsByClassName("mann");
if (mann) {
for (x = 0; x < mann.length; x++) {
mann[x].style.display = "none";
}
}
//
var weib = document.getElementsByClassName("weib");
if (weib) {
for (x = 0; x < weib.length; x++) {
weib[x].style.display = "block";
}
}
}
document.onload = start();<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Geschlecht</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="s_radio" id="s_radio1" value="m" checked="checked">
<label class="form-check-label" for="s_radio1">
Männlicher Körper
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="s_radio" id="s_radio2" value="f">
<label class="form-check-label" for="s_radio2">
Weiblicher Körper
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Körperfettanteil</legend>
<div class="col-sm-10">
<div class="form-check">
<select class="form-control" id="kfaform">
<option value="" selected></option>
<option value="3.5" class="mann">3-4 %</option>
<option value="6.5" class="mann">6-7 %</option>
<option value="11" class="mann">10-12 %</option>
<option value="15" class="mann">15 %</option>
<option value="20" class="mann">20 %</option>
<option value="25" class="mann">25 %</option>
<option value="30" class="mann">30 %</option>
<option value="35" class="mann">35 %</option>
<option value="40" class="mann">40 %</option>
<option value="11" class="weib">10-12 %</option>
<option value="16" class="weib">15-17 %</option>
<option value="21" class="weib">20-22 %</option>
<option value="25" class="weib">25 %</option>
<option value="30" class="weib">30 %</option>
<option value="35" class="weib">35 %</option>
<option value="40" class="weib">40 %</option>
<option value="45" class="weib">45 %</option>
<option value="50" class="weib">50 %</option>
</select>
</div>
</div>
</div>
</fieldset>
Stack Overflow用户
发布于 2018-09-27 15:58:04
我这样解决了enhzflep发现的问题：
setMannOptions();
//
document.getElementById("s_radio1").addEventListener("click", function() {
$('#kfaform option').prop('selected', function() {
return this.defaultSelected;
});
$("#kfaform option:first").attr("selected", true);
setMannOptions();
});
document.getElementById("s_radio2").addEventListener("click", function() {
$('#kfaform option').prop('selected', function() {
return this.defaultSelected;
});
("#kfaform option:first").attr("selected", true);
setWeibOptions();
});
}现在一切都正常了。
非常感谢非常快速的响应！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52508364
复制相关文章
相似问题
腾讯云开发者
