Da Woon Jung Da Woon Jung - 2 months ago 7
jQuery Question

javascript jquery chosen not working

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="ff.js" type="text/javascript"></script>
</body>
</html>


jquery
chosen
not working, what's wrong in my code?
My select tag just appear as default form....

p.s. Jquery code is located in another file ("ff.js")

$(document).ready(function(){
$(".chosen-select").chosen({no_results_text: "Sorry, We don't have such database ;-)"});
});


image

Answer

You need to change your javascript file like this

$('.chosen-select').change(function(){
    var aaa = $("#DB").val(); // get option value
    if(aaa === '') {
      // user select empty item
      console.log("Sorry, We don't have such database ;-)");
    }
    else{
      // user select valid item
      console.log(aaa);
    }
});