Chosen drop down
Question
I need to change the options of a drop-down list according to a selection. I would like to use a chosen drop-down list.
https://harvesthq.github.io/chosen/
I made a fiddle and it works fine.
https://jsfiddle.net/3hkhcycg/12/
The problem is that I can't make it work in my project. I am afraid I don't include the right things in the right place.
That's how and where I include stuff.
At the end of head tag:
<link rel="stylesheet" href="../Libs/chosen_v1.6.2/docsupport/prism.css">
<link rel="stylesheet" href="../Libs/chosen_v1.6.2/chosen.css">
Somewhere before head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Libs/chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="../Libs/chosen_v1.6.2/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
//HTML code that describes my elements
//JS code in a script tag with jquery
I've notice that:
- if I put JS code inside
$(document).ready- it gives an error:
Uncaught TypeError: $(...).chosen is not a function
- it gives an error:
- if it's outside
$(document).ready- there is no error, the drop-down field looks like a chosen drop-down, but it doesn't change the content according to selection.
- if it's outside
$(document).readyand I remove$(".chosen_class").chosen({ width:"90%"})- it changes the content but, of course, it does not look like a chosen drop-down
Update: I need drop-downs for a pop-up which is activated from a JS class. There is a lot of code, I will show here the relevant one.
MyClass.prototype.showPopUp= function(){
document.getElementById('my_div').style.display = "block";
}
<div id="my_div" style = "display:none;">
<form>
<select id="select1" >
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="select2" class="chosen_class" data-placeholder="Select here" multiple>
</select>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".chosen_class").chosen({
width:"90%"
});
$("#select1").change(function () {
var letter = $(this).val();
$('#select2').empty();
if (letter == "A") {
$('#select2')
.append("<option value='letter A'>letter A</option>")
.trigger("chosen:updated");
} else if (letter == "B") {
$('#select2')
.append("<option value='letter B'>letter B</option>")
.trigger("chosen:updated");
} else if (letter == "C") {
$('#select2')
.append("<option value='letter C'>letter C</option>")
.trigger("chosen:updated");
}
});
});
Everything is in myFile.php I include this file in my project like this:
<?php require_once(ROOTPATH."/myFile.php"); ?>
</body>
</html>
1 answers
solution1
0 2016-12-19 14:21:45
What you should do:
<!DOCTYPE html>
<html>
<head>
<title>Your page title</title>
<!-- Your chosen.css file -->
</head>
<body>
<!-- Your HTML and select element to be affected here -->
<!-- jQuery library declaration here;
please note: this should come before your chosen JavaScript files.
The order is very important -->
<!-- Your chosen JavaScript files here -->
<!-- Then, initialise chosen here so as to affect your desired element -->
</body>
</html>
In summary and in required order, using the code from your shared jsfiddle and taking in consideration your last update while templating;
Here, it is assumed your main file is named index.php and at the same directory level as your my file named myFile.php which is to contain your actual code; as such, you can achieve your intended purpose as follow:
Content of your index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Your page title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
</head>
<body>
<?php require_once("myFile.php"); ?>
</body>
</html>
Content of your myFile.php file:
<div id="my_div" style = "display:none;">
<form>
<select id="select1" >
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="select2" class="chosen_class" data-placeholder="Select here" multiple>
</select>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script>
$(document).ready(function () {
// All manipulation begins here.
MyClass.prototype.showPopUp= function(){
document.getElementById('my_div').style.display = "block";
};
$(".chosen_class").chosen({
width:"90%"
});
$("#select1").change(function () {
var letter = $(this).val();
$('#select2').empty();
if (letter == "A") {
$('#select2')
.append("<option value='letter A'>letter A</option>")
.trigger("chosen:updated");
} else if (letter == "B") {
$('#select2')
.append("<option value='letter B'>letter B</option>")
.trigger("chosen:updated");
} else if (letter == "C") {
$('#select2')
.append("<option value='letter C'>letter C</option>")
.trigger("chosen:updated");
}
});
});
</script>
Remember: for the purpose of the illustration above, it is assumed both index.php and myFile.php are located at the same level in your selected directory.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.