CODEWITHSUNDEEP
javascriptjqueryhtmljquery-chosen
Da Woon Jung
Da Woon Jung

Reputation: 117

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

Upvotes: 1

Views: 994

Answers (3)

Alongkorn
Alongkorn

Reputation: 4207

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);
    }
});

Upvotes: 1

UkI
UkI

Reputation: 1

I don't quite understand your question but try this LINK

HTML

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

JS

$('.chosen-select').change(function(){
    var aaa = $("#DB").val();
    if(aaa != ""){
    console.log(aaa);
    }
    else{
    console.log("Sorry, We don't have such database ;-)");
    }
});

Upvotes: 0

Sam Munroe
Sam Munroe

Reputation: 1418

How about using on change event?

$('.chosen-select').change(function(){
     console.log(this.val());
});

Upvotes: 0

Related Questions