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
Jason Nichols
3,7703 gold badges32 silver badges51 bronze badges
asked Sep 5, 2013 at 15:39
Manan
1,1854 gold badges16 silver badges25 bronze badges
-
2Please 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 codeItay– Itay2013年09月05日 15:42:22 +00:00Commented Sep 5, 2013 at 15:42
-
Hi Manan. Aren't you able to provide a working example ?Milche Patern– Milche Patern2013年09月05日 15:42:24 +00:00Commented Sep 5, 2013 at 15:42
-
@Itay I am getting problem in jsFiddle so kept code directly.Manan– Manan2013年09月05日 15:44:41 +00:00Commented Sep 5, 2013 at 15:44
-
1Can you lot not copy/pasta? jsbin.com/EjaQIzus/2/edit Edit: Added to OP.Reinstate Monica Cellio– Reinstate Monica Cellio2013年09月05日 15:44:46 +00:00Commented Sep 5, 2013 at 15:44
-
@MilchePatern This is working example.Manan– Manan2013年09月05日 15:45:20 +00:00Commented Sep 5, 2013 at 15:45
2 Answers 2
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
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...
Comments
lang-js