CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Manan
Manan

Reputation: 1207

Getting issue with javascript and html

I have modified the script below in which I found a problem that the first and second drop-down menus cannot be closed after clicking the option. I want them to work similar to third drop-down menu.

Please help me for the same.

My Code:

<!doctype html>
<html>
<head>
<title>Custom Styled Selectbox</title>
<link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customSelectBox.css" />
</head>
<body class="noJS">
<script type="text/javascript"> 
try{Typekit.load();}catch(e){}
    var bodyTag = document.getElementsByTagName("body")[0];
    bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<style type="text/css">
.hasJS select.custom1 {
    position: absolute;
    left: -999em;
}
</style>
<div class="grid-system clearfix">
    <div class="row">
        <div class="col span-9">
            <div class="example clearfix">
                <select class="custom interactive" id="properties">
                    <option value="Residential for Sale" selected>Residential for Sale</option>
                    <option value="Residential for Rent">Residential for Rent</option>
                    <option value="Commercial for Sale">Commercial for Sale</option>
                    <option value="Commercial for Rent">Commercial for Rent</option>
                </select>

                <select class="custom interactive" id="TypeList">
                  <option selected>Residential for Sale</option>
                  <option>Residential for Rent</option>
                  <option>Commercial for Sale</option>
                  <option>Commercial for Rent</option>
                </select>

                <select class="custom1 interactive1" id="TypeList1">

                </select>
             </div>
        </div>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js"></script> 
<script src="http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js"></script> 
<script type="text/javascript"> 
$(function() {
    window.prettyPrint && prettyPrint()
    /*
        This is how initialization normally looks. 
        Typically it's just $("select.custom"), but to make this example more clear 
        I'm breaking from the pattern and excluding interactive
    */
    var sb, sb2;
    $("select.custom").not(".interactive").each(function() {
        sb = new SelectBox({
            selectbox: $(this),
            height: 150,
            width: 200
        });
    });

    $("select.custom1").not(".interactive").each(function() {
        sb2 = new SelectBox({
            selectbox: $(this),
            height: 150,
            width: 250
        });
    });

    /*
        Adding some extra functionality for "interactive" selects
    */
    var TypeList = {
        //selectone: ["Any"],
        'Residential for Sale': ["Any", "Landed", "Condominium", "HDB", "Others"],
        'Residential for Rent': ["Any", "Landed", "Condominium", "HDB", "Others"],
        'Commercial for Sale': ["Any", "Industrial", "Retail", "Land", "Office", "Others"],
        'Commercial for Rent': ["Any", "Industrial", "Retail", "Land", "Office", "Others"]
        }

    var TypeListVal = {
        //selectone: ["Any"],
        'Residential for Sale': ["Any", "1", "2", "3", "4"],
        'Residential for Rent': ["Any", "1", "2", "3", "4"],
        'Commercial for Sale': ["Any", "5", "6", "7", "8", "9"],
        'Commercial for Rent': ["Any", "5", "6", "7", "8", "9"]
        }


    var defaultSelectboxSettings = {
        height: 150,
        width: 150
    };

    var country_SB = null,
    city_SB = null;

    $("select.interactive").each(function() {
        if ($(this).attr("id") == "properties") {
            country_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                selectbox: $(this),
                changeCallback: function(val) {
                    if (TypeList[val]) {
                        city_SB.enable();
                        updateCities(val);
                    }
                    if (val == "selectone") {
                        city_SB.disable();
                    }

                    <!------------------------------Location---------------------------->
                    var getType = jQuery( "#TypeList option:selected" ).text();
                    if(getType == "HDB"){

                        var select = document.getElementById("TypeList1");
                        select.options.length = 0;

                        var myobject = [
                            ['Any', 'Any'],
                            ['1', 'Boat Quay'],
                            ['2', 'Chinatown'],
                            ['3', 'Havelock Road'],
                            ['4', 'Marina Square'],
                            ['5', 'Raffles Place']
                        ];

                        var select = document.getElementById("TypeList1");
                        for (var i=0, len = myobject.length; i<len; i++){
                            select.options[select.options.length] = new Option(myobject[i][1], myobject[i][0]);
                        }
                        sb2.sync();

                    }else{

                        var select = document.getElementById("TypeList1");
                        select.options.length = 0;

                        var myobject = [
                            ['Any', 'Any'],
                            ['1', 'D01 Boat Quay / Raffles Place'],
                            ['2', 'D02 Chinatown / Tanjong Pagar'],
                            ['36', 'D03 Alexandra / Commonwealth'],
                            ['37', 'D04 Harbourfront / Telok Blangah'],
                            ['38', 'D04 Harbourfront / Telok Blangah']
                        ];

                        var select = document.getElementById("TypeList1");
                        for (var i=0, len = myobject.length; i<len; i++){
                            select.options[select.options.length] = new Option(myobject[i][1], myobject[i][0]);
                        }
                        sb2.sync();

                    }
                    <!------------------------------Location---------------------------->

                }
            }));
        } else if ($(this).attr("id") === "TypeList") {
            city_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                selectbox: $(this)
                }));
        }

    });

    updateCities($("#properties").val());

    if ($("#properties").val() == "selectone") {
       //city_SB.disable();
    }

    <!-------------------------------------------------------------Location-------------------------------------------------------------------------->
    if(jQuery( "#TypeList option:selected" ).text()){

        var myobject = [
            ['Any', 'Any'],
            ['1', 'D01 Boat Quay / Raffles Place'],
            ['2', 'D02 Chinatown / Tanjong Pagar'],
            ['36', 'D03 Alexandra / Commonwealth'],
            ['37', 'D04 Harbourfront / Telok Blangah'],
            ['38', 'D04 Harbourfront / Telok Blangah']
        ];

        var select = document.getElementById("TypeList1");
        for (var i=0, len = myobject.length; i<len; i++){
            select.options[select.options.length] = new Option(myobject[i][1], myobject[i][0]);
        }
        sb2.sync();
    }
    <!-------------------------------------------------------------Location--------------------------------------------------------------------------->

    function updateCities(val) {
        var $select = $("select#TypeList"),
        html = "";

        for (var i = 0; i < TypeList[val].length; i++) {
            html += '<option value="'+ TypeListVal[val][i] +'">' + TypeList[val][i] + '</option>';
        }
        $select.html(html);

        // HACK: chrome is too fast?
        setTimeout(function() {
            city_SB.sync();
        }, 1);
    }

});         
</script>
</body>
</html>

Thanks in advance for any help. :)

Example jsbin

http://jsbin.com/EjaQIzus/2/edit

Upvotes: 1

Views: 154

Answers (2)

Milche Patern
Milche Patern

Reputation: 20442

There is that error :

Timestamp: 9/5/2013 1:45:28 PM
Error: TypeError: $dl.jScrollPaneRemove is not a function
Source File: http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js
Line: 238

Upvotes: 1

Chris Vo
Chris Vo

Reputation: 153

Because you tried to modify the example given in SelectBox's github page, it's really difficult to follow your code, the variable names are not helping at all.

Anyway, the problem lies definitely, with the repetitive calls you are making to sb2: sb2.sync()

Probably, you need to replicate the functionality in the updateCities() function one more time, since you have three boxes in a row(and not two like the example), in order to update and sync everything properly...

Hope it helps a little, towards the solution...

Upvotes: 0

Related Questions