javascript - 五个输入取决于两个选择的值
问题描述
晚安。
我试图根据两个不同的选择填写几个输入，其中两个选择的不同组合将在输入中产生不同的结果。
目前我有这个，但我不知道如何将“种族”与“级别”联系起来，这样当两者都被选中时，相应的数字会显示为已填满，正如谁说的那样，它将把复式表中的数据放入javascript。
$('.raza').on('change', function() {
var value =this.value;
if(value == 'Brujas y brujos');
else if(value == 'Nivel nato');
{
$('.fue').val('6');
$('.mag').val('10');
$('.res').val('2');
$('.vel').val('2');
$('.vit').val('55');
}
if(value == 'Brujas y brujos');
else if(value == 'Nivel nato');
{
$('.fue').val('8');
$('.mag').val('20');
$('.res').val('4');
$('.vel').val('3');
$('.vit').val('65');
}
if(value == 'Brujas y brujos');
else if(value == 'Nivel medio');
{
$('.fue').val('10');
$('.mag').val('30');
$('.res').val('6');
$('.vel').val('4');
$('.vit').val('80');
}
if(value == 'Brujas y brujos');
else if(value == 'Nivel total');
{
$('.fue').val('12');
$('.mag').val('40');
$('.res').val('8');
$('.vel').val('5');
$('.vit').val('90');
if(value == 'Hijos de Eva');
else if(value == 'Nivel nato');
{
$('.fue').val('7');
$('.mag').val('0');
$('.res').val('3');
$('.vel').val('2');
$('.vit').val('50');
}
if(value == 'Hijos de Eva');
else if(value == 'Nivel nato');
{
$('.fue').val('9');
$('.mag').val('0');
$('.res').val('5');
$('.vel').val('3');
$('.vit').val('60');
}
if(value == 'Hijos de Eva');
else if(value == 'Nivel medio');
{
$('.fue').val('11');
$('.mag').val('0');
$('.res').val('7');
$('.vel').val('4');
$('.vit').val('70');
}
if(value == 'Hijos de Eva');
else if(value == 'Nivel total');
{
$('.fue').val('13');
$('.mag').val('0');
$('.res').val('9');
$('.vel').val('5');
$('.vit').val('85');
});<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<select name="titulos" class="raza"><option hidden value="" disabled selected>Raza</option><option label="Brujas y brujos">Brujas y brujos</option>
<option label="Hijos de Eva">Hijos de Eva</option>
<option label="Humanos">Humanos</option>
<option label="Licántropos">Licántropos</option>
<option label="Sirenas y tritones">Sirenas y tritones</option>
<option label="Vampiros">Vampiros</option>
</select>
<select name="titulos" class="nivel"><option hidden value="" disabled selected>Nivel</option><option label="Nivel nato">Nivel nato</option>
<option label="Nivel primario">Nivel primario</option>
<option label="Nivel medio">Nivel medio</option>
<option label="Nivel total">Nivel total</option>
</select>
<table style=" display: flex; justify-content: center; align-items: center; "><tbody><tr><td><div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue" value="" placeholder="0"> Fuerza</div></td><td><div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div></td><td><div class="stats"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div></td><td><div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div></td><td><div class="stats" style=" width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div></td></tr></tbody></table></div>
我能做什么？提前致谢！
解决方案
工作示例：
$('.raza,.nivel').on('change', function() {
var raza = $('.raza').val();
var nivel = $('.nivel').val();
if (raza == 'Brujas y brujos' && nivel == 'Nivel nato') {
$('.fue').val('6');
$('.mag').val('10');
$('.res').val('2');
$('.vel').val('2');
$('.vit').val('55');
} else if (raza == 'Brujas y brujos' && nivel == 'Nivel nato') {
$('.fue').val('8');
$('.mag').val('20');
$('.res').val('4');
$('.vel').val('3');
$('.vit').val('65');
} else if (raza == 'Brujas y brujos' && nivel == 'Nivel medio') {
$('.fue').val('10');
$('.mag').val('30');
$('.res').val('6');
$('.vel').val('4');
$('.vit').val('80');
} else if (raza == 'Brujas y brujos' && nivel == 'Nivel total') {
$('.fue').val('12');
$('.mag').val('40');
$('.res').val('8');
$('.vel').val('5');
$('.vit').val('90');
} else if (raza == 'Hijos de Eva' && nivel == 'Nivel nato') {
$('.fue').val('7');
$('.mag').val('0');
$('.res').val('3');
$('.vel').val('2');
$('.vit').val('50');
} else if (raza == 'Hijos de Eva' && nivel == 'Nivel nato') {
$('.fue').val('9');
$('.mag').val('0');
$('.res').val('5');
$('.vel').val('3');
$('.vit').val('60');
} else if (raza == 'Hijos de Eva' && nivel == 'Nivel medio') {
$('.fue').val('11');
$('.mag').val('0');
$('.res').val('7');
$('.vel').val('4');
$('.vit').val('70');
} else if (raza == 'Hijos de Eva' && nivel == 'Nivel total') {
$('.fue').val('13');
$('.mag').val('0');
$('.res').val('9');
$('.vel').val('5');
$('.vit').val('85');
} else {
// default?
$('.fue').val('0');
$('.mag').val('0');
$('.res').val('0');
$('.vel').val('0');
$('.vit').val('0');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<select name="titulos" class="raza">
<option hidden value="" disabled selected>Raza</option>
<option value="Brujas y brujos">Brujas y brujos</option>
<option value="Hijos de Eva">Hijos de Eva</option>
<option value="Humanos">Humanos</option>
<option value="Licántropos">Licántropos</option>
<option value="Sirenas y tritones">Sirenas y tritones</option>
<option value="Vampiros">Vampiros</option>
</select>
<select name="titulos" class="nivel">
<option hidden value="" disabled selected>Nivel</option>
<option value="Nivel nato">Nivel nato</option>
<option value="Nivel primario">Nivel primario</option>
<option value="Nivel medio">Nivel medio</option>
<option value="Nivel total">Nivel total</option>
</select>
<table>
<tbody>
<tr>
<td>
<div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue" value="" placeholder="0"> Fuerza</div>
</td>
<td>
<div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div>
</td>
<td>
<div class="stats" style="width: 120px;"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div>
</td>
<td>
<div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div>
</td>
<td>
<div class="stats" style="width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div>
</td>
</tr>
</tbody>
</table>
</div>注意：我只是不明白为什么在这么小的代码中需要这么多的库。
注意2：这里有很多东西需要优化......如果你对这个答案没问题并理解它，请写评论，以便我们尝试优化一下。
推荐阅读
- templates - 使用文档作为模板：标题编号问题
- c++ - 只有一名成员的匿名工会
- python - OperationalError：“未知的 MySQL 服务器主机”
- javascript - 如何根据页脚高度放置一个div总是与页脚相邻
- vba - 无法使用 Visual Basic 7 在 while 循环中创建文件
- mkdocs - 错误 - 配置值：“主题”。错误：无法识别的主题名称：
- oracle - 声明过程后的空白输出
- javascript - 如何在 React 中使状态不可变
- unit-testing - Laravel 应用开发中的测试流程
- matlab - 在MATLAB中从有向图中提取分支