remove div when option value unselected

Question

whats wrong with this?

            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";
                }
            }

There is two options one named FLIGHT and The other is REGION

<div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Type:</strong>
                {!! Form::select('type', \App\Destination::getEnum('type'),\App\Destination::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>

when I select FLIGHT the input field Flights appears but when I select REGION the input field Flights still appearing. I want it to disappear after I select REGION.

please help.

Answer 1

You need to change this one because it always return true:

if(admOptionValue === nameSelect.value){

to this one:

if (admOptionValue === "FLIGHT") {

The problem was that nameSelect.value is identical to document.getElementById("admOption").value because the nameSelect variable actually points to the same element and this is done by calling the javascript function with the this reference.

Sample:

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>

In your case, you have to add the flights' condition to the if statement to show the required text field if the FLIGHTS option was selected.