Drop Down List do not create when more elements added

[Nakata kokuyo]

Good day All,

i using PHP for the project to create a SELECT/Drop down for the Country and state

function fillCategory(){ 
addOption(document.drop_list.Category, '1', 'Afghanistan'); 
addOption(document.drop_list.Category, '2', 'Albania'); 
addOption(document.drop_list.Category, '3', 'Algeria'); 
addOption(document.drop_list.Category, '4', 'Andorra'); 
addOption(document.drop_list.Category, '5', 'Angola'); 
addOption(document.drop_list.Category, '6', 'Antigua and Barbuda'); 
addOption(document.drop_list.Category, '7', 'Argentina'); 
addOption(document.drop_list.Category, '8', 'Armenia'); 
addOption(document.drop_list.Category, '9', 'Australia'); 
addOption(document.drop_list.Category, '10', 'Austria'); 
addOption(document.drop_list.Category, '11', 'Azerbaijan'); 
addOption(document.drop_list.Category, '12', 'Bahamas'); 
addOption(document.drop_list.Category, '13', 'Bahrain'); 
addOption(document.drop_list.Category, '14', 'Bangladesh'); 
addOption(document.drop_list.Category, '15', 'Barbados'); 
addOption(document.drop_list.Category, '16', 'Belarus'); 
addOption(document.drop_list.Category, '17', 'Belgium'); 
addOption(document.drop_list.Category, '18', 'Belize'); 
addOption(document.drop_list.Category, '19', 'Benin'); 
addOption(document.drop_list.Category, '20', 'Bhutan'); 
addOption(document.drop_list.Category, '21', 'Bolivia'); 
addOption(document.drop_list.Category, '22', 'Bosnia and Herzegovina'); 
addOption(document.drop_list.Category, '23', 'Botswana'); 
addOption(document.drop_list.Category, '24', 'Brazil'); 
addOption(document.drop_list.Category, '25', 'Brunei'); 
addOption(document.drop_list.Category, '26', 'Bulgaria'); 
addOption(document.drop_list.Category, '27', 'Burkina Faso'); 
addOption(document.drop_list.Category, '28', 'Burundi'); 
addOption(document.drop_list.Category, '29', 'Cambodia'); 
addOption(document.drop_list.Category, '30', 'Cameroon'); 
addOption(document.drop_list.Category, '31', 'Canada'); 
addOption(document.drop_list.Category, '32', 'Cape Verde'); 
addOption(document.drop_list.Category, '33', 'Central African Republic'); 
addOption(document.drop_list.Category, '34', 'Chad'); 
addOption(document.drop_list.Category, '35', 'Chile'); 
addOption(document.drop_list.Category, '36', 'China'); 
addOption(document.drop_list.Category, '37', 'Colombia'); 
addOption(document.drop_list.Category, '38', 'Comoros'); 
addOption(document.drop_list.Category, '39', 'Congo (Brazzaville)'); 
addOption(document.drop_list.Category, '40', 'Congo, Democratic Republic of the'); 
addOption(document.drop_list.Category, '41', 'Costa Rica'); 
addOption(document.drop_list.Category, '42', 'C?te d'Ivoire'); 
addOption(document.drop_list.Category, '43', 'Croatia'); 
addOption(document.drop_list.Category, '44', 'Cuba'); 
addOption(document.drop_list.Category, '45', 'Cyprus'); 
addOption(document.drop_list.Category, '46', 'Czech Republic'); 
addOption(document.drop_list.Category, '47', 'Denmark'); 
addOption(document.drop_list.Category, '48', 'Djibouti'); 
addOption(document.drop_list.Category, '49', 'Dominica'); 
addOption(document.drop_list.Category, '50', 'Dominican Republic'); 
addOption(document.drop_list.Category, '51', 'East Timor (Timor Timur)'); 
addOption(document.drop_list.Category, '52', 'Ecuador'); 
addOption(document.drop_list.Category, '53', 'Egypt'); 
addOption(document.drop_list.Category, '54', 'El Salvador'); 
addOption(document.drop_list.Category, '55', 'Equatorial Guinea'); 
addOption(document.drop_list.Category, '56', 'Eritrea'); 
addOption(document.drop_list.Category, '57', 'Estonia'); 
addOption(document.drop_list.Category, '58', 'Ethiopia'); 
addOption(document.drop_list.Category, '59', 'Fiji'); 
addOption(document.drop_list.Category, '60', 'Finland'); 
addOption(document.drop_list.Category, '61', 'France'); 
addOption(document.drop_list.Category, '62', 'Gabon'); 
addOption(document.drop_list.Category, '63', 'Gambia, The'); 
addOption(document.drop_list.Category, '64', 'Georgia'); 
addOption(document.drop_list.Category, '65', 'Germany'); 
addOption(document.drop_list.Category, '66', 'Ghana'); 
addOption(document.drop_list.Category, '67', 'Greece'); 
addOption(document.drop_list.Category, '68', 'Grenada'); 
addOption(document.drop_list.Category, '69', 'Guatemala'); 
addOption(document.drop_list.Category, '70', 'Guinea'); 
addOption(document.drop_list.Category, '71', 'Guinea-Bissau'); 
addOption(document.drop_list.Category, '72', 'Guyana'); 
addOption(document.drop_list.Category, '73', 'Haiti'); 
addOption(document.drop_list.Category, '74', 'Honduras'); 
addOption(document.drop_list.Category, '75', 'Hungary'); 
addOption(document.drop_list.Category, '76', 'Iceland'); 
addOption(document.drop_list.Category, '77', 'India'); 
addOption(document.drop_list.Category, '78', 'Indonesia'); 
addOption(document.drop_list.Category, '79', 'Iran'); 
addOption(document.drop_list.Category, '80', 'Iraq'); 
addOption(document.drop_list.Category, '81', 'Ireland'); 
addOption(document.drop_list.Category, '82', 'Israel'); 
addOption(document.drop_list.Category, '83', 'Italy'); 
addOption(document.drop_list.Category, '84', 'Jamaica'); 
addOption(document.drop_list.Category, '85', 'Japan'); 
addOption(document.drop_list.Category, '86', 'Jordan'); 
addOption(document.drop_list.Category, '87', 'Kazakhstan'); 
addOption(document.drop_list.Category, '88', 'Kenya'); 
addOption(document.drop_list.Category, '89', 'Kiribati'); 
addOption(document.drop_list.Category, '90', 'Korea, North'); 
addOption(document.drop_list.Category, '91', 'Korea, South'); 
addOption(document.drop_list.Category, '92', 'Kuwait'); 
addOption(document.drop_list.Category, '93', 'Kyrgyzstan'); 
addOption(document.drop_list.Category, '94', 'Laos'); 
addOption(document.drop_list.Category, '95', 'Latvia'); 
addOption(document.drop_list.Category, '96', 'Lebanon'); 
addOption(document.drop_list.Category, '97', 'Lesotho'); 
addOption(document.drop_list.Category, '98', 'Liberia'); 
addOption(document.drop_list.Category, '99', 'Libya'); 
addOption(document.drop_list.Category, '100', 'Liechtenstein'); 
addOption(document.drop_list.Category, '101', 'Lithuania'); 
addOption(document.drop_list.Category, '102', 'Luxembourg'); 
addOption(document.drop_list.Category, '103', 'Macedonia'); 
addOption(document.drop_list.Category, '104', 'Madagascar'); 
addOption(document.drop_list.Category, '105', 'Malawi'); 
addOption(document.drop_list.Category, '106', 'Malaysia'); 
addOption(document.drop_list.Category, '107', 'Maldives'); 
addOption(document.drop_list.Category, '108', 'Mali'); 
addOption(document.drop_list.Category, '109', 'Malta'); 
addOption(document.drop_list.Category, '110', 'Marshall Islands'); 
addOption(document.drop_list.Category, '111', 'Mauritania'); 
addOption(document.drop_list.Category, '112', 'Mauritius'); 
addOption(document.drop_list.Category, '113', 'Mexico'); 
addOption(document.drop_list.Category, '114', 'Micronesia'); 
addOption(document.drop_list.Category, '115', 'Moldova'); 
addOption(document.drop_list.Category, '116', 'Monaco'); 
addOption(document.drop_list.Category, '117', 'Mongolia'); 
addOption(document.drop_list.Category, '118', 'Montenegro'); 
addOption(document.drop_list.Category, '119', 'Morocco'); 
addOption(document.drop_list.Category, '120', 'Mozambique'); 
addOption(document.drop_list.Category, '121', 'Myanmar (Burma)'); 
addOption(document.drop_list.Category, '122', 'Namibia'); 
addOption(document.drop_list.Category, '123', 'Nauru'); 
addOption(document.drop_list.Category, '124', 'Nepal'); 
addOption(document.drop_list.Category, '125', 'Netherlands'); 
addOption(document.drop_list.Category, '126', 'New Zealand'); 
addOption(document.drop_list.Category, '127', 'Nicaragua'); 
addOption(document.drop_list.Category, '128', 'Niger'); 
addOption(document.drop_list.Category, '129', 'Nigeria'); 
addOption(document.drop_list.Category, '130', 'Norway'); 
addOption(document.drop_list.Category, '131', 'Oman'); 
addOption(document.drop_list.Category, '132', 'Pakistan'); 
addOption(document.drop_list.Category, '133', 'Palau'); 
addOption(document.drop_list.Category, '134', 'Panama'); 
addOption(document.drop_list.Category, '135', 'Papua New Guinea'); 
addOption(document.drop_list.Category, '136', 'Paraguay'); 
addOption(document.drop_list.Category, '137', 'Peru'); 
addOption(document.drop_list.Category, '138', 'Philippines'); 
addOption(document.drop_list.Category, '139', 'Poland'); 
addOption(document.drop_list.Category, '140', 'Portugal'); 
addOption(document.drop_list.Category, '141', 'Qatar'); 
addOption(document.drop_list.Category, '142', 'Romania'); 
addOption(document.drop_list.Category, '143', 'Russia'); 
addOption(document.drop_list.Category, '144', 'Rwanda'); 
addOption(document.drop_list.Category, '145', 'Saint Kitts and Nevis'); 
addOption(document.drop_list.Category, '146', 'Saint Lucia'); 
}

Code to create Drop-down list and i putting this way

function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}

FYI, fillCategory() in fact is a function with PHP code which get the value from database. the value here are where i captured from Firefox error console, the strange case here is if i have put limitation for DB query like "SELECT * from country limit 10" , then it will generate the Drop down list but not the case of full list.

Can any expert here point out what's wrong on my JS script ?

thank you for your guidance !

[Eric Pascarello]

var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);  //<-- wrong

Change to

var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options[selectbox.options.length] = optn;

I personally would do it like this:

var optn = new Option(text, value);
selectbox.options[selectbox.options.length] = optn;

Eric

[Nakata kokuyo]

Thanks Eric for the guidance

i just have 1 more question, by looking at the code below

selectbox.options[selectbox.options.length] = optn;

Why we do not need to increment the length of the options and it will allow continue add on new option

[Eric Pascarello]

You are adding an option to the next available position in the list. Just like how you add a new option to an array.

Eric