Javascript dynamic select selected

Dynamic Select in HTML with Ajax

In HTML 4, drop-down lists are encoded with a select tag containing a list of options:

We will see that it is easy to dynamically change a such list with JavaScript code.

Better yet, if we allow the user to edit a list, it is necessary to save and load it at a later session, and we will see how to accomplish that with Ajax.

Attributes of SELECT

size: The maximal number of rows displayed. Ex: size=»10″.

multiple: Added if several item may be selected at once.

selectedIndex: Number of the selected item, from zero.

Dynamically change a SELECT

The select tag

It includes at least one option, and possibly a text and a value.

With a value and if the option is selected by default:

For example, you can use the text to display the title of a page and add a value for the URL. The JavaScript code will retrieve the proper data.

JavaScript find the content of an option, with the text attribute of option, while the value attribute returns the value.

For the example, it is assumed that the form is named form1 and the select the name select1. You can access an option by its index number in the list:

The first option is at index 0:

document.write (document.form1.select1[0]. text); document.write (document.form1.select1[0]. value);

Changing an option

That said, it becomes easy to change a list. To change the value, we assign something to the value property:

document.form1.select1[0]. value = "new value";

To change the content, we create a new Option object whose argument is the wording to be contained in the option.

document.form1.select1[0] = new Option ( "new name");

Adding an option

Knowing that the number of options is given by the length attribute of the select object, you can add a new entry at the end of the list by creating an object Option:

var length = document.form1.select1.length; document.form1.select1[length] = new Option ( "New entry");

Deleting an option

To remove an option it is assigned to null:

document.form1.select1[x] = null;

But this must be the last in the list, and if this is not the case, we pack the list.

For example if you have a list of three options:

And we want to delete the second option the list is so packed:

for(i = 1; i < length; i++) < document.form1.select1[i] = new Option(document.form1.select1[ i + 1].text); >document.form1.select1[length] = null;

For compatibility with IE, we should also detect and assign holes in list, see at the demo.

Inserting an option

It is the same process in reverse order, if the position of insertion is n:

for(i = length; i > n; i--) < document.form1.select1[i] = document.form1.select1[i - 1]; >document.form1.select1[n] = new Option("new name");

Load and save options of SELECT

Two Ajax functions were added to our Dynamic Select library.

dataReader reads a file on the server. Its arguments are the filename and the name of a function called when the request is terminated.

dataWrite calls a PHP script on the server. The arguments are the data variable which contains the parameters of the script, the name of a function called when the request is made and the name of the form.

When the contents of the list is saved, the submit button of the form is activated delayed, but this is an option for the demo, and is independent of the purpose of this article.

Loading a list of options

The method onload of window executes the Ajax script that loads the list with the dataRead function, then calls the function that populates the select options.

function populate(content) < content = content.replace(" ", ""); var lst = content.split("
"); var optlist = document.forms[0].select1; for(i = 0; i < lst.length; i++) < if(lst[i] == "") continue; optlist.options[i] = new Option(lst[i]); >>

In the file, names are separated by the
marker, it is a choice among others.

Saving the list

The event onclick is associated to the saveList JavaScript function that builds a string of parameters with the options of the select and sends them to a PHP script that creates a text file for use at a later session.

var formname = document.forms[0]; var optlist = formname.select1; var size = optlist.options.length; for(i = 0; i < size; i++) < title = optlist.options[i].text; if(data != "") data +="&"; data += "tab" + String(i) + "=" + title; >dataWrite("dynamic-save.php", data, loadapage, formname);

The script is obvious, it gets the parameters and creates a text file and separates the names with the string
.

The code of this Dynamic Select library is put into practice in the demonstration below.

Demonstration of a dynamic SELECT tag

This demo shows how to modify the list of options for a SELECT tag in an HTML form. The Save function is disabled in the online demo. It works in the version contained in the archive.

The JavaScript code is sufficient to change the list of options of a SELECT. Ajax allows the code to load a predefined list or to save the new modified list.

Источник

Create a dynamic SELECT drop-down list (combo-box) in JavaScript

In real-time web applications, sometimes we are required to create a dynamic select drop-down list (combo box) which means the options will be loaded at run time for that combo box. This article shows you to create a drop-down list dynamically using JavaScript, HTML, and JSON. Here we will see multiple examples to dynamically populate select options in JavaScript.

Overview

To create a dynamic drop-down combo or drop-down list, let’s assume we have a dynamic JSON array that contains the country list data (code, name) as follows:

Create a dynamic drop-down list on button click in Javascript.

To create a drop-down list dynamically on button click, we will see here multiple examples based on the country data formats. For all the examples we will have the common HTML code only Javascript code will change.

Create Dynamic Dropdown List 
 
  Example-1. 

Let’s assume we have country data in the form of a string array as follows:

var countries = ["Australia","France","India","Japan","United States"];

Let’s see the javascript code for this as follows:

Example-2.

Let’s assume we have country data in the form of a JSON array as follows:

Then we can write the javascript code for this as follows:

Example-3.

In this example, we will take the above JSON array only, but here we will write a different javascript logic to create a dynamic drop-down list.

Conclusion

In this article, you have seen programmatically create a dropdown list using JavaScript from the JSON data format.

FAQ

All Countries Drop Down List In Html

  country Afghanistan Aland Islands Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bonaire, Sint Eustatius and Saba Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Congo, Democratic Republic of the Congo Cook Islands Costa Rica Cote D'Ivoire Croatia Cuba Curacao Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands (Malvinas) Faroe Islands Fiji Finland France French Guiana French Polynesia French Southern Territories Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guernsey Guinea Guinea-Bissau Guyana Haiti Heard Island and Mcdonald Islands Holy See (Vatican City State) Honduras Hong Kong Hungary Iceland India Indonesia Iran, Islamic Republic of Iraq Ireland Isle of Man Israel Italy Jamaica Japan Jersey Jordan Kazakhstan Kenya Kiribati Korea, Democratic People's Republic of Korea, Republic of Kosovo Kuwait Kyrgyzstan Lao People's Democratic Republic Latvia Lebanon Lesotho Liberia Libyan Arab Jamahiriya Liechtenstein Lithuania Luxembourg Macao Macedonia, the Former Yugoslav Republic of Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia, Federated States of Moldova, Republic of Monaco Mongolia Montenegro Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Islands Norway Oman Pakistan Palau Palestinian Territory, Occupied Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Reunion Romania Russian Federation Rwanda Saint Barthelemy Saint Helena Saint Kitts and Nevis Saint Lucia Saint Martin Saint Pierre and Miquelon Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Serbia and Montenegro Seychelles Sierra Leone Singapore Sint Maarten Slovakia Slovenia Solomon Islands Somalia South Africa South Georgia and the South Sandwich Islands South Sudan Spain Sri Lanka Sudan Suriname Svalbard and Jan Mayen Swaziland Sweden Switzerland Syrian Arab Republic Taiwan, Province of China Tajikistan Tanzania, United Republic of Thailand Timor-Leste Togo Tokelau Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Turks and Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States United States Minor Outlying Islands Uruguay Uzbekistan Vanuatu Venezuela Viet Nam Virgin Islands, British Virgin Islands, U.s. Wallis and Futuna Western Sahara Yemen Zambia Zimbabwe  

Источник