gpt4 book ai didi

javascript - getelementbyid 多ID显示

转载 作者:行者123 更新时间:2023-12-03 00:11:14 25 4
gpt4 key购买 nike

我有一个下拉菜单,一旦单击某个主题,它就会在列表中打开选定的字段。是否可以一键显示两个或多个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com