我有一个下拉菜单，一旦单击某个主题，它就会在列表中打开选定的字段。是否可以一键显示两个或多个 div？
这是我当前的代码；
<script type="text/javascript">
function showfield(name){
if(name=='Hijacking')document.getElementById('div1').innerHTML='Registration:
<input type="text" name="reg" />' +
'Make: <input type="text" name="make" /> ' + 'Model: <input
type="text" name="model" />';
else document.getElementById('div1').innerHTML='';
if document.getElementById('div2').innerHTML='Name: <input type="text
="name" />';
else document.getElementById('div2').innerHTML='';
}
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div id="div2"></div>
所以我尝试过这个；
if(name=='Hijacking')document.getElementById('div1' 'div2').innerHTML='Registration: <input type="text" name="reg" />' +
'Make: <input type="text" name="make" /> ' + 'Model: <input type="text" name="model" />';
else document.getElementById('div1').innerHTML='';
我的目标是当假设选择劫持时让 div1 和 div2 显示，原因是假设 div 2 在我的下拉列表中的其他选择中具有公共(public)字段
第二次尝试:
<script type="text/javascript">
$('select[name="travel_arriveVia"]').change(function(){
if ($(this).val() == "Hijacking"){
$("#div1, #div2).show();
}
});
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div class="Hijacking" id="div1" style="display:none;">
Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
More html
</div>
最佳答案
使用 jQuery
作为引用:https://jquery.com/
您可以使用 jQuery 更改代码。
这是一个工作示例:https://jsfiddle.net/8a20rkwt/
在你的 head 部分包含 jquery，如下所示:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
然后像这样使用它，一键按 id 显示多个元素:
<script>
$(function() {
$('#travel_arriveVia').change(function(){
$(".Hijacking").hide();
if ($(this).val() == "Hijacking"){
$("#div1, #div2").show();
}
});
});
</script>
在你的html中:
<select name="travel_arriveVia" id="travel_arriveVia">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div class="Hijacking" id="div1" style="display:none;">
Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
More html
</div>
有关 jQuery 更改事件处理程序的更多详细信息如下:https://api.jquery.com/change/
关于javascript - getelementbyid 多ID显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54720846/