Getting issue with javascript and html

Question

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

Please don't just copy all your code, but keep only the relevant parts. Also it is advisable for you to provide us with a jsFiddle.net with your code — Itay
– Itay, Commented Sep 5, 2013 at 15:42
@Itay I am getting problem in jsFiddle so kept code directly. — Manan
– Manan, Commented Sep 5, 2013 at 15:44
Can you lot not copy/pasta? jsbin.com/EjaQIzus/2/edit Edit: Added to OP. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 5, 2013 at 15:44

Milche Patern · Accepted Answer · 2013-09-05 17:47:31Z

1

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

answered Sep 5, 2013 at 17:47

Milche Patern

20.7k6 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Vo · Accepted Answer · 2013-09-05 17:10:06Z

0

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

answered Sep 5, 2013 at 17:10

Chris Vo

1536 bronze badges

Collectives™ on Stack Overflow

Getting issue with javascript and html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related