CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ryan Peters
Ryan Peters

Reputation: 1

Hide div based on value of select box

I have a select dropdown with a list of servers with varying types of encryption.

Currently I am able to display the encryption type of the currently selected option in a label (id="type") but I also want to hide a div (#secure) if encryption = none.

I've tried adding if x = none; $("#secure").hide() to the myFunction script but that stops the dropdown populating, I'm not sure where I'm going wrong.

So basically what I'm looking to achieve is if x = none, hide div. Thanks in advance.

function myFunction() {
  var x = document.getElementById("encryption").value;
  document.getElementById("type").innerHTML = "Encryption type: " + x;
}
<select class="browser-default" id="servers" name="servers" onchange="myFunction()" </select>
<p id="type"></p>

<div class="secure"> This server is secure </div>

Upvotes: 0

Views: 75

Answers (2)

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4588

So the question is if none is string or what?

function myFunction() {
  var x = document.getElementById("encryption").value;
  document.getElementById("type").innerHTML = "Encryption type: " + x;
  if(x === "none") <--- pay attention here if none is really a string
  { 
     document.getElementById("secure").style.display = "none"; <-- this actually hides the element.
  }
}

Upvotes: 0

Blue
Blue

Reputation: 22911

= is an assignment operator. You want to use == for comparison:

if (x == 'none') {
    $("#secure").hide();
}

Upvotes: 1

Related Questions