未选择选项值时删除 div

Question

这有什么问题？

function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue === nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}

有两个选项，一个名为FLIGHT，另一个名为REGION。

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Type:</strong>
{!! Form::select('type', AppDestination::getEnum('type'),AppDestination::getEnum('type'), array('onchange' => "admSelectCheck(this);", 'id' => "admOption")) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group" id="admDivCheck" style="display:none;">
<strong>Flights:</strong>
{!! Form::text('flights_data', null, array('class' => 'form-control')) !!}
</div>
</div>

当我选择"航班"时，输入字段"航班"出现，但当我选择"地区"时，输入字段航班仍在出现。 我希望它在我选择区域后消失。

请帮忙。

Answer 1

您需要更改此值，因为它始终返回 true：

if(admOptionValue === nameSelect.value){

对此：

if (admOptionValue === "FLIGHT") {

问题是nameSelect.value与document.getElementById("admOption").value相同，因为 nameSelect 变量实际上指向相同的元素，这是通过使用this引用调用 javascript 函数来完成的。

样本：

function admSelectCheck(nameSelect) {
if (nameSelect) {
admOptionValue = document.getElementById("admOption").value;
if (admOptionValue === "FLIGHT") {
document.getElementById("admDivCheck").style.display = "block";
} else {
document.getElementById("admDivCheck").style.display = "none";
}
} else {
document.getElementById("admDivCheck").style.display = "none";
}
}

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Type:</strong>
<select id="admOption" onchange="admSelectCheck(this);">
<option>REGION</option>
<option>FLIGHT</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group" id="admDivCheck" style="display:none;">
<strong>Flights:</strong>
<input type="text" class="form-control" value="flights data" />
</div>
</div>

在这种情况下，您必须将航班的条件添加到 if 语句中，以显示所需的文本字段(如果选择了FLIGHTS选项(。