Hide div based on value of select box

Question

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() 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> 

Answer 1

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

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

Answer 2

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.
  }
}