Select options(ace.js)

  var eh = ace.edit("htmlEditor"); 
 eh.setTheme("ace/theme/monokai"); 
 eh.session.setMode("ace/mode/html"); 
 document.getElementById('htmlEditor').style.fontSize='15px'; 
 
 var ec = ace.edit("cssEditor"); 
 ec.setTheme("ace/theme/monokai"); 
 ec.session.setMode("ace/mode/css"); 
 document.getElementById('cssEditor').style.fontSize='15px'; 
 
  var eb = ace.edit("jsEditor"); 
 eb.setTheme("ace/theme/monokai"); 
 eb.session.setMode("ace/mode/javascript"); 
 document.getElementById('jsEditor').style.fontSize='15px'; 
 
 eh.getSession().on('change', function() { 
  update(); 
}) 
  ec.getSession().on('change', function() { 
  update(); 
}) 
    eb.getSession().on('change', function() { 
  update(); 
}) 
function update() { 
var res = document.getElementById('result').contentWindow.document; 
res.open(); 
res.write('<style>' + ec.getValue() + '</style>'); 
res.write('<script>' + eb.getValue() + '</script>'); 
res.write(eh.getValue()); 
res.close(); 
} 
update(); 
 
function openMnuHtml() { 
    document.getElementById("myDropdown-html").classList.toggle("show"); 
} 
 
window.onclick = function(event) { 
  if (!event.target.matches('#dropbtn-html')) { 
 
    var dropdowns = document.getElementsByClassName("dropdown-content-html"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
        openDropdown.classList.remove('show'); 
      } 
    } 
  } 
} 
 
function openMnuCss() { 
    document.getElementById("myDropdown-css").classList.toggle("show"); 
} 
 
window.onclick = function(event) { 
  if (!event.target.matches('#dropbtn-css')) { 
 
    var dropdowns = document.getElementsByClassName("dropdown-content-css"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
        openDropdown.classList.remove('show'); 
      } 
    } 
  } 
} 
 
 
function openMnuJs() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 
 
window.onclick = function(event) { 
  if (!event.target.matches('#dropbtn')) { 
 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
        openDropdown.classList.remove('show'); 
      } 
    } 
  } 
} 
 
function chooseLanJs() { 
  var titleJs = document.getElementById('dropbtn'); 
  var titleCofee = "CoffeScript"; 
  var eb = ace.edit("jsEditor"); 
  var select = document.getElementById('slct');  
  var selectedValue = select.options[select.selectedIndex].value; 
    if (selectedValue == 2) { 
        eb.session.setMode("ace/mode/coffee"); 
            var res = document.getElementById('result').contentWindow.document; 
res.open(); 
res.write('<script type="text/coffeescript">' + eb.getValue() + '</script>'); 
res.close(); 
titleJs.innerHtml = titleCofee; 
    } 
    else { 
              eb.session.setMode("ace/mode/javascript"); 
              res.open(); 
res.write('<script>' + eb.getValue() + '</script>'); 
res.close(); 
    } 
} 
chooseLanJs(); 
 
function showTheme() { 
  var cbox = document.getElementById('checkbox'); 
  var hdrCode = document.getElementById('header-code'); 
  var mnuCode = document.getElementById('menu-code'); 
  var line1 = document.getElementById('line'); 
  var line2 = document.getElementById('line2'); 
  var line3 = document.getElementById('line3'); 
  var line4 = document.getElementById('line4'); 
  var htmlEditor = document.getElementById('htmlEditor'); 
  var cssEditor = document.getElementById('cssEditor'); 
  var jsEditor = document.getElementById('jsEditor'); 
  var asideBlock = document.getElementById('aside-block'); 
  var titleTextarea = document.getElementById('title-of-textarea'); 
  var dropbtnhtml = document.getElementById('dropbtn-html'); 
  var dropbtncss = document.getElementById('dropbtn-css'); 
  var dropbtnjs = document.getElementById('dropbtn'); 
  var eh = ace.edit("htmlEditor"); 
  var ec = ace.edit("cssEditor"); 
  var tomColorL = "#e8e5e5"; 
  var mnkColorL = "#1c1e19"; 
  if (cbox.checked == false) { 
      eh.setTheme('ace/theme/tomorrow'); 
      ec.setTheme('ace/theme/tomorrow'); 
      eb.setTheme('ace/theme/tomorrow'); 
      hdrCode.style.backgroundColor = tomColorL; 
      line1.style.borderRight = "4px solid" + tomColorL; 
      line2.style.borderRight = "4px solid" + tomColorL; 
      line3.style.borderRight = "4px solid" + tomColorL; 
      line4.style.borderRight = "4px solid" + tomColorL; 
      mnuCode.style.color = "#2d2d2d"; 
      htmlEditor.style.borderBottom = "4px solid" + tomColorL; 
      cssEditor.style.borderBottom = "4px solid" + tomColorL; 
      jsEditor.style.borderBottom = "4px solid" + tomColorL; 
      asideBlock.style.height = "950px"; 
      asideBlock.style.color = "#2d2d2d"; 
      asideBlock.style.backgroundColor = "#ededed"; 
      titleTextarea.style.color = "#2d2d2d"; 
      titleTextarea.style.backgroundColor = "white"; 
      dropbtnhtml.style.backgroundColor = "white"; 
      dropbtnhtml.style.color = "black"; 
      dropbtncss.style.backgroundColor = "white"; 
      dropbtncss.style.color = "black"; 
      dropbtnjs.style.backgroundColor = "white"; 
      dropbtnjs.style.color = "black"; 
  } 
else { 
     eh.setTheme('ace/theme/monokai'); 
     ec.setTheme('ace/theme/monokai'); 
     eb.setTheme('ace/theme/monokai'); 
     hdrCode.style.backgroundColor = mnkColorL; 
     line1.style.borderRight = "4px solid" + mnkColorL; 
     line2.style.borderRight = "4px solid" + mnkColorL; 
     line3.style.borderRight = "4px solid" + mnkColorL; 
     line4.style.borderRight = "4px solid" + mnkColorL; 
     mnuCode.style.color = "white"; 
     htmlEditor.style.borderBottom = "none"; 
     cssEditor.style.borderBottom = "none"; 
     jsEditor.style.borderBottom = "none"; 
     titleTextarea.style.color = "white"; 
     titleTextarea.style.backgroundColor = "#272822"; 
     asideBlock.style.backgroundColor = "#3b3d34"; 
     asideBlock.style.color = "white"; 
     dropbtnhtml.style.backgroundColor = "#272822"; 
     dropbtnhtml.style.color = "white"; 
     dropbtncss.style.backgroundColor = "#272822"; 
     dropbtncss.style.color = "white"; 
     dropbtnjs.style.backgroundColor = "#272822"; 
     dropbtnjs.style.color = "white"; 
} 
} 
showTheme();

@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Oswald|Yanone+Kaffeesatz|Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese'); 
*{ 
  padding: 0; 
  margin: 0; 
} 
#htmlEditor { 
    height: 100%; 
    min-height: 43vh; 
    width: 33.03%; 
    display: inline-block; 
} 
#line { 
   border-right: 4px solid #1c1e19; 
display: flex; 
padding: 1%; 
margin: -40% 0 0 31%; 
float: left; 
position: relative; 
height: 501px; 
} 
#line2 { 
border-right: 4px solid #1c1e19; 
display: flex; 
padding: 1%; 
margin: -40% 33.3% 0 0%; 
position: relative; 
height: 501px; 
float: right; 
} 
#line3 { 
border-right: 4px solid #1c1e19; 
display: flex; 
padding: 1%; 
margin: -40% 0% 0 0%; 
position: relative; 
height: 501px; 
float: right; 
} 
#cssEditor { 
    height: 100%; 
    min-height: 43vh; 
    width: 33.03%; 
    display: inline-block; 
} 
#jsEditor { 
    height: 100%; 
    min-height: 43vh; 
    width: 33.03%; 
    display: inline-block; 
} 
#container { 
    height: 100%; 
    width: auto; 
    white-space: nowrap; 
    overflow: hidden; 
    position: relative; 
} 
#result { 
    min-height: 440px; 
    position: relative; 
    background-color: white; 
    width: 79.6%; 
} 
#line4 { 
border-right: 4px solid #1c1e19; 
display: flex; 
padding: 1%; 
margin: -26.8% 0% 0 0%; 
position: relative; 
height: 414.5px; 
float: right; 
} 
#result-block { 
    margin-top: -0.2%; 
} 
  #title-of-textarea { 
    display: flex; 
    background-color: white; 
    color: white; 
    background-color: #272822; 
  font-family: 'Yanone Kaffeesatz', sans-serif; 
padding-top: 0.5%; 
padding-bottom: 0.1%; 
  } 
  #title-Html { 
    padding: 0 0 0 1%; 
    display: flex; 
  } 
  #title-css { 
margin: 0 0 0 auto; 
padding: 0 0 0 2%; 
display: flex; 
  } 
    #title-js { 
margin: auto; 
position: relative; 
left: 2.5%; 
display: flex; 
  } 
  .mnu-code { 
    display: flex; 
    list-style-type: none; 
    padding: 0 0 0 2%; 
  } 
.mnu-code li { 
    padding-left: 5%; 
} 
#menu-code { 
    width: 30%; 
    cursor: pointer; 
    font-family: 'Arsenal', sans-serif; 
        color: white; 
} 
#mnu-code { 
    padding: 24% 0% 0 3%; 
} 
#header-code { 
    padding: 1% 0 1% 0; 
       background-color:#1c1e19; 
           display: flex; 
} 
} 
#set { 
    cursor: pointer; 
} 
#aside-block { 
    width: 20%; 
    height: 946px; 
   background-color: #3b3d34; 
    float: right; 
    font-size: 1.2em; 
      font-family: 'Yanone Kaffeesatz', sans-serif; 
      color: white; 
} 
.dropdown-content p { 
    display: block; 
    position: absolute; 
} 
.box-label{ 
    display: inline-block; 
    margin: 5px; 
        cursor: pointer; 
} 
.save::before { 
    content:"\f0c7"; 
    font-family: "FontAwesome"; 
} 
 
#dropbtn-html { 
    background-color: #272822; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
        font-size: 1.5em; 
      font-family: 'Yanone Kaffeesatz', sans-serif; 
} 
#dropbtn-css { 
    background-color: #272822; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
        font-size: 1.5em; 
      font-family: 'Yanone Kaffeesatz', sans-serif; 
} 
.center-on-page { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%); 
} 
h1 { 
  text-align: center; 
} 
 
select { 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  -ms-appearance: none; 
  appearance: none; 
  outline: 0; 
  box-shadow: none; 
  border: 0 !important; 
  background: white; 
  background-image: none; 
    width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0 0 0 .5em; 
  color: black; 
  cursor: pointer; 
} 
 
.select { 
  position: relative; 
  display: block; 
  width: 90%; 
  height: 2em; 
  background: #2c3e50; 
  overflow: hidden; 
  border-radius: .25em; 
  margin: 1% 0% 5% 0; 
  border: 1px solid #272822; 
} 
select::-ms-expand { 
  display: none; 
} 
/* Arrow */ 
.select::after { 
  content: '\25BC'; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  padding: 0 0.5em; 
  background: rgb(59, 61, 52); 
  pointer-events: none; 
    line-height: 2.4; 
} 
/* Transition */ 
.select:hover::after { 
  color: #f39c12; 
} 
.select::after { 
  -webkit-transition: .25s all ease; 
  -o-transition: .25s all ease; 
  transition: .25s all ease; 
} 
#dropbtn { 
    background-color: #272822; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
        font-size: 1.5em; 
      font-family: 'Yanone Kaffeesatz', sans-serif; 
} 
.dropdown-content { 
    position: absolute; 
    background-color: white; 
    z-index: 9000; 
    -webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
width: 280%; 
height: 170px; 
text-align: left; 
top: 100%; 
display: none; 
} 
.language { 
    padding: 6% 0 0 8%; 
} 
.dropdown-content span { 
    font-family: 'Yanone Kaffeesatz', sans-serif; 
    font-size: 1.2em; 
    color: black; 
} 
.dropdown-content-css { 
 position: absolute; 
background-color: black; 
z-index: 9000; 
width: 5%; 
height: 100px; 
text-align: center; 
top: 8%; 
display: none; 
} 
.dropdown-content-html { 
 position: absolute; 
background-color: black; 
z-index: 9000; 
width: 5%; 
height: 100px; 
text-align: center; 
top: 8%; 
display: none; 
} 
.show {display:block;} 
#title-js #dropbtn::after { 
        content:"\f0d7"; 
    font-family: "FontAwesome"; 
    font-size: 0.7em; 
    position: relative; 
    left: 4%; 
} 
#title-css #dropbtn-css::after { 
        content:"\f0d7"; 
    font-family: "FontAwesome"; 
    font-size: 0.7em; 
    position: relative; 
    left: 9%; 
} 
#title-Html #dropbtn-html::after { 
        content:"\f0d7"; 
    font-family: "FontAwesome"; 
    font-size: 0.7em; 
    position: relative; 
    left: 9%; 
} 
.run-code::before { 
    content:"\f144"; 
    font-family: "FontAwesome"; 
} 
.change::before { 
    content:"\f17a"; 
    font-family: "FontAwesome"; 
} 
.box-text:before{ 
    content:"\f096"; 
    font-family: "FontAwesome"; 
    font-weight: normal; 
    font-style: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    margin-right: 5px; 
    width: 1em; 
    display: inline-block; 
    font-size: 1em; 
} 
.box-text { 
 
} 
#checkbox:checked + .box-text:before{ 
    content:"\f14a"; 
    color: #1e88e5; 
    animation: checkanimate 200ms; 
} 
.box-label input[type="checkbox"]{ 
    display: none; 
} 
@keyframes checkanimate{ 
    0% {transform: scale(0);} 
    90% {transform: scale(1.4);} 
    100% {transform: scale(1);} 
}

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf 8"> 
<title>Finance</title> 
<link rel="stylesheet" href="css/style.css"> 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> 
	<link href="https://fonts.googleapis.com/css?family=Arsenal:400,400i&amp;subset=cyrillic" rel="stylesheet">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script> 
</head> 
			 
		  <body> 
               <div id="aside-block"> 
<div id="mnu-code"> 
	<label class="box-label"> 
	 <input type="checkbox" id="checkbox" checked="" onclick="showTheme()"> 
		<span class="box-text">Темная тема</span> 
	</label> 
	</div> 
                </div> 
                <div id="header-code"> 
                     <div id="menu-code"> 
                     	<ul class="mnu-code"> 
                     		<li class="run-code"> Проиграть</li> 
                     		<li class="save"> Сохранить</li> 
                     		<li class="change"> Поменять вид</li> 
</ul> 
</div> 
		<p> 
		</div> 
		  	<div id="container"> 
		  		<div id="title-of-textarea"> 
		  			<div id="title-Html"> 
		  		<button onclick="openMnuHtml()" id="dropbtn-html">Html</button> 
		  			  <div id="myDropdown-html" class="dropdown-content-html"> 
		  				<span>Язык</span> 
		  			</div> 
		  			</div> 
	  		<div id="title-css"> 
		  			<button onclick="openMnuCss()" id="dropbtn-css">Css</button> 
		  			  <div id="myDropdown-css" class="dropdown-content-css"> 
		  				<span>hi</span> 
		  				<span>hi2</span> 
		  			</div> 
		  		</div> 
		  		<div id="title-js"> 
		  			<button onclick="openMnuJs()" id="dropbtn">JavaScript</button> 
		  			  <div id="myDropdown" class="dropdown-content"> 
		  			  	<div class="language"> 
		  				<span>Язык</span> 
  <div class="select"> 
    <select name="slct" id="slct"> 
      <option value="1">JavaScript</option> 
      <option value="2">CoffeeScript</option> 
      <option value="3">No JS</option> 
      <option value="4">Nice!</option> 
    </select> 
  </div> 
  <span>Фреймворки и библиотеки</span> 
  <div class="select"> 
    <select name="slct2" id="slct2"> 
      <option>JavaScript</option> 
      <option value="1">jQuery</option> 
      <option value="2">No JS</option> 
      <option value="3">Nice!</option> 
    </select> 
  </div> 
		  			</div> 
		  			</div> 
		  		</div> 
		  	</div> 
<div id="htmlEditor"></div> 
<div id="line"></div> 
<div id="cssEditor"></div> 
<div id="line2"></div> 
<div id="jsEditor"></div> 
<div id="line3"></div> 
</div> 
<div id="result-block"> 
<iframe id="result" frameborder="0"></iframe><div id="line4"></div></div> 
	<script src="js/app.js"></script> 
		  </body> 
		  </html>