Dynamically remove options from dropdown. How to return to original dropdown list?

marty80

03-24-2012, 05:05 PM

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

var cl = element;

var text_list = new Array();

var value_list = new Array();

var length = cl.length;

for (var foo=0; foo<length; foo++) {

text_list[foo] = cl.options[foo].text;

value_list[foo] = cl.options[foo].value;

alert("text array " + foo + " " + text_list[foo]);

alert("value array " + foo + " " + value_list[foo]);

}

populate(cl, text_list, value_list);

}

function populate(element, text, value) {

// populate options with previously stored values

var cl = element;

var length = cl.length;

cl.options.length=0;

for (var bar=0; bar<length; bar++) {

cl.options[bar]= new Option(text[bar], value[bar], false, false);

}

}

function crafty_set_country(code) {

var cl = document.getElementById('select');

store(cl);

for (var i=0; i<cl.length; i++) {

if (cl.options[i].value == code) {

alert(cl.options[i].value + " found");

var value = cl.options[i].value;

var text = cl.options[i].text;

cl.options.length=0;

cl.options[0]=new Option(text, value, true, true);

/*
for (var j=0; j<cl.length; j++) {

alert("second loop " + cl.options[j].text);

if (cl.options[i].value != code) {

cl.options[j]

}

}
*/

} else {

alert(cl.options[i].value);

}

}

}

//]]>
</script>

</head>

<body>

<form>

<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

xelawho

03-24-2012, 05:37 PM

If I understand correctly, it seems that you are better storing your orginal data in an array and populating your select dynamically onload. That6 way you can just call that function again to repopulate the list:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

var codes =[["ten",10],["twenty",20],["thirty",30],["forty",40],["fifty",50]]

function populate() {
for (var i=0; i<codes.length; i++) {
document.getElementById("select").options[i]= new Option(codes[i][0], codes[i][1])
}
}

function crafty_set_country(code) {
var list=document.getElementById("select");
for (x = list.length - 1; x>=0; x--) {
if (list[x].value!=code)
list.remove(x);
}
}

//]]>
</script>

</head>

<body onload="populate()">

<form>

<select id="select">

</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="populate()">

</form>

</body>
</html>

marty80

03-24-2012, 09:43 PM

Thanks for your reply!

The dropdown list gets populated by PHP. So it can't be populated from an existing JavaScipt array. That's why I wrote a function to store the values from the list first.

The list must be repopulated as soon as a user changes the postcode field and the onblur triggers the crafty_set_country() function again.

So if the user enters a postcode that matches the country gets changed and all other items are removed from the dropdown list (originally only the selected option was changed).

If the user changes the postcode again the dropdown list must return to its original state and depending on a match remain unchanged or all options but one are removed again.

in your script instead of having a repopulate button this would correspond to a button calling the crafty_set_country() function with a non-matching value which should then repopulate the select.

xelawho

03-24-2012, 10:38 PM

The dropdown list gets populated by PHP. So it can't be populated from an existing JavaScipt array.

you can't populate the array from php? because if I understand the rest of it, it could look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

var codes =[["ten",10],["twenty",20],["thirty",30],["forty",40],["fifty",50]]

function populate() {
for (var i=0; i<codes.length; i++) {
document.getElementById("select").options[i]= new Option(codes[i][0], codes[i][1])
}
}

function crafty_set_country(code) {
var list=document.getElementById("select");
for (x = list.length - 1; x>=0; x--) {
if (list[x].value!=code)
list.remove(x);
}
}

//]]>
</script>

</head>

<body onload="populate()">

<form>

<select id="select">

</select>

<input type="text" onblur="populate(); crafty_set_country(this.value)">

</form>

</body>
</html>

Mishu

03-24-2012, 11:12 PM

This is best done on the server. When the user selects a postcode, refresh the page and have your php code create the correct country options.

If you don't want a page refresh, you can use AJAX to repopulate the countries drop down but AJAX won't work on mobile devices that do not support javascript.

But whether you use ajax or not, get your php code to populate the countries drop down and you won't have to use javascript unless you want to use AJAX.

marty80

03-25-2012, 04:36 PM

I would like to avoid having to refresh the page and AJAX is a bit too involved for me at this point.

But I think I can do something with xelawho's first suggestion. I could load the JavaScript array on page load with the data from the select and repopulate it when no matches are found. So all elements are removed in the loop and if there are zero elements (no match) I repopulate the select. Not very elegant but if it does the job...

Many thanks for your help so far!

Logic Ali

03-26-2012, 12:51 AM

But I think I can do something with xelawho's first suggestion. I could load the JavaScript array on page load with the data from the select and repopulate it when no matches are found. So all elements are removed in the loop and if there are zero elements (no match) I repopulate the select.

I would recommend keeping your <select> PHP-generated and saving all default options on load. That way at least the list is always populated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function saveOptions( elem )
{
elem.dOptions = [];

for( var i = 0, temp; ( temp = elem.options[ i ] ); i++ )
{
elem.dOptions.push( temp.text );
elem.dOptions.push( temp.value );
}
}

function populate( elem )
{
var data = elem.dOptions;

for( var i=0, j=0; i < data.length; i += 2, j++ )
elem.options[ j ] = new Option( data[ i ], data[ i+1 ] );
}

function crafty_set_country( elem, code )
{
var list = elem.options;

for (var x = list.length - 1; x>=0; x--)
{
if( list[x].value!=code )
list.remove(x);
}
}

//]]>
</script>

</head>

<body onload="saveOptions( document.getElementById( 'select' ) )">

<form>

<select id="select" name='mySelect'>
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country( mySelect, 50 )">
<input type="button" value="repopulate" name="button" onClick="populate( mySelect )">

</form>

</body>
</html>