How to populate a drop-down with external xml file

Discussion in 'JavaScript' started by Fiona80, Nov 13, 2007.

0
  1. #1
    Hello!

    I have a problem I want to retrieve the information from one XML file and populate with this info a drop-down box in JavaScript. At the moment, I can retrieve the data but I can not populate the drop-down box.

    Someone knows how to do this automatically?

    Thank you for your help.

    <html>
    <head>
    <title>ProgramaciónWeb - Ejemplo</title>
    <script language="JavaScript" type="text/javascript" src="XML.js"></script>
    <script>


    function leerDatos(){
    if (oXML.readyState == 4) {
    var xml = oXML.responseXML.documentElement;
    for (i = 0; i < xml.getElementsByTagName('Snow_BW').length; i++){
    var item = xml.getElementsByTagName('Snow_BW');
    var txt = item.getElementsByTagName('GEMEINDE')[0].firstChild.data;
    document.selectForm.stateList.options = new Option(value, value, false, false);

    }
    }
    }
    function clearSelect(list) {
    for(var i = 0; i < list.options.length; i++) {
    list.options = null;
    }
    }

    function AJAXCrearObjeto(){
    var obj;
    if(window.XMLHttpRequest) { // no es IE
    obj = new XMLHttpRequest();
    } else { // Es IE o no tiene el objeto
    try {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {
    alert('El navegador utilizado no está soportado');
    }
    }
    return obj;
    }

    oXML = AJAXCrearObjeto();
    oXML.open('get', 'Snow_BW.xml');
    oXML.onreadystatechange = leerDatos;
    oXML.send('');
    </script>
    </head>
    <body>
    <form name="selectForm">
    <label accesskey="stateList">State:</label>
    <select name="stateList" id="stateList" onchange="javascript:populateCityList();">
    <option disabled="disabled">Loading...</option>
    </select>
    </form>
    </body>
    </html>
     
    Fiona80, Nov 13, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    Al ver los nombres de funciones que has usado, te respondo en español.

    Necesitas hacer varias cosas:
    - Prrimero necesitas poner un container que englobe a tu select. Lo mejor es con un div.
    - En la funcion leerDatos, fuera del bucle inicializa una variable con la select:
    
  miSelect = '<select name="stateList" id="stateList" onchange="javascriptopulateCityList();">';
    Code (markup):
    - Dentro del bucle vas añadiendo cada uno de los option a la variable miSelect
    
  miSelect += '<option value="' + valor + '.... etcetera
    Code (markup):
    - Fuera del bucle, añade el fin del select a la variable miSelect
    - Por ultimo le asignas el valor de esa variable al innerHTML del div que creaste agrupando al select
    
  miDiv.innerHTML = miSelect;
    Code (markup):
     
    ajsa52, Nov 13, 2007 IP
  3. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	
	var cities =[]; 
	cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"];
	cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"];
	cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburgh"];
	
	function fillSelect(nValue,nList){

		nList.options.length = 1;
		var curr = cities[nValue];
		for (each in curr)
			{
			 var nOption = document.createElement('option'); 
			 nOption.appendChild(document.createTextNode(curr[each])); 
			 nOption.setAttribute("value",curr[each]); 			 
			 nList.appendChild(nOption); 
			}
	}

</script>
<style type="text/css">

	 body {background-color:#eae3c6;margin-top:60px}
	 form {width:330px;margin:auto}
	 fieldset {width:330px;background-color:#f0fff0;border:1px solid #87ceeb}
	 legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
	 label {font-family:times;font-size:12pt;color:#00008B;padding:5px}
	 select {font-family:tahoma;font-size:10pt;width:125px;margin-left:27px}
	.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
	<form method="post" action="">
	   <fieldset>
		<legend>Form</legend>
			<select name='states' onchange="fillSelect(this.value,this.form['cities'])">
				<option value="">Select Your State</option>
				<option value="CA">California</option>
				<option value="OH">Ohio</option>
				<option value="PA">Pennsylvania</option>
			</select>
			<select name='cities'>
				<option value="">Select Your City</option>
			</select>
		<input type='submit' name='submit' value="Submit" class='submitBtn'>
	   </fieldset>
	</form>
</body>
</html>
    Code (markup):
     
    Mike H., Nov 13, 2007 IP