unable to replace element with replaceWith()
I'm trying to create a responsive search menu for a web app I'm developing, but I'm unable to get the replaceWith() method to work the way I need it to. The sample code below loads an html page that shows two select elements with ids "asset" and "laptop_model", and hides a third select element with id "desktop_model". What I want is for the "laptop_model" element to be replaced by the "desktop_model" element whenever the value of the "asset" element is set to "Desktop". But instead what is happening is that the "laptop_element" is being replaced by the string
#desktop_model , instead of the "desktop_model" select element. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function selectOption() {
var x = document.getElementById("asset").value;
if (x == "desktop") {
$(document).ready(function(){
$("#laptop_model").replaceWith("#desktop_model");
});
}
}
</script>
</head>
<body>
<select id="asset" name="asset_type" onchange="selectOption()">
<option value="none">None Selected</option>
<option value="any">Any</option>
<option value="desktop">Desktop</option>
<option value="laptop">Laptop</option>
<option value="tablet">Tablet</option>
<option value="printer">Printer</option>
<option value="smart_phone">Smart Phone</option>
<option value="key_fob">Key Fob</option>
</select>
<br>
<br>
<select id="laptop_model" name="laptop_model">
<option value="none">None Selected</option>
<option value="surface_pro">MS Surface Pro 3</option>
<option value="latitudeE4300">Latitude E4300</option>
<option value="latitudeE4310">Latitude E4310</option>
<option value="latitudeE5550">Latitude E5550</option>
<option value="latitudeE6230">Latitude E6230</option>
<option value="latitudeE6410">Latitude E6420</option>
<option value="latitudeE6420">Latitude E6510</option>
<option value="latitudeE7240">Latitude E7240</option>
</select>
<br>
<br>
<select id="desktop_model" name="desktop_model" style="display: none;">
<option value="none">None Selected</option>
<option value="optiplex_360">Optiplex 360</option>
<option value="optiplex gx520">Optiplex GX520</option>
<option value="optiplex_745">Optiplex 745</option>
<option value="optiplex_755">Optiplex 755</option>
<option value="optiplex_960">Optiplex 960</option>
<option value="optiplex_980">Optiplex 980</option>
<option value="optiplex_990">Optiplex 990</option>
</select>
</body>
</html>