2012-12-18 15 views
16

Jak zastosować wybraną jQuery na stronie html?Jak korzystać z wybranego jQuery w pliku html?

Mam formularz select, więc muszę użyć modelu multiple select firmy Chosen, aby wyglądał bardziej przyjaźnie dla użytkownika.

Pobrałem pliki i skopiowałem je do folderu na mojej stronie.

Więc co zrobiłem było zaliczyć chosen.jquery.min.js w <head>:

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script> 

a instrukcja mówi, aby połączyć się z wybraną wtyczkę: $(".chzn-select").chosen();

nie wiem gdzie umieścić to oświadczenie w JavaScript aby wywołać wybraną opcję wielokrotnego wyboru. Myślałem, że to tak proste, jak używanie Bootstrapa, hah. Jakaś pomoc?

+1

jeśli dołączyliśmy plik na swojej stronie, powinien po prostu być tak proste jak tworzenie

17

Twój select musi mieć klasę chzn-select i normalnie uruchomić skrypt po stronie obciążenia jak następuje:

$(function() { 
    $(".chzn-select").chosen(); 
}); 

Poniżej jest badany, przykład praca:

<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css"> 
</head> 
<body> 

<script type="text/javascript"> 
$(function() { 
    $(".chzn-select").chosen(); 
}); 
</script> 

<select class="chzn-select" multiple="true" name="faculty" style="width:200px;"> 
     <option value="AC">A</option> 
     <option value="AD">B</option> 
     <option value="AM">C</option> 
     <option value="AP">D</option> 
</select> 


</body> 
</html> 
+1

Dzięki. Teraz pracował :) – AimanB

2
<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $(".chzn-select").chosen(); 
}); 
</script> 

<select class="chzn-select" multiple="true" name="faculty"> 
     <option value="AC">A</option> 
     <option value="AD">B</option> 
     <option value="AM">C</option> 
     <option value="AP">D</option> 
</select> 
+0

Dziękuję, że zadziałało teraz :) – AimanB