Chosen drop down

Question

Chosen drop down

2k Views Asked by Newbie At 03 April 2025 at 18:52

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.

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
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).ready and 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>

Original Q&A

There are 1 best solutions below

**nyedidikeke** · Answer 1

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.

Chosen drop down

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in JQUERY-CHOSEN

Trending Questions

Popular # Hahtags

Popular Questions