I have a text file named country.txt. Data is stored in the said file like:
AF:Afghanistan
AX:Åland Islands
AL:Albania
DZ:Algeria
AS:American Samoa
AD:Andorra
AO:Angola
The aforesaid text file is stored in google drive.
I would like to get the aforesaid data in a combo drop down list. I have written the code as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<select id="countries" name="countries">
<option selected="selected" value="--Please Select--">--Please Select--</option>
$.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt", function( json ) {
$.each(json, function(key, val) {
$('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
});
});
</select>
</div>
</body>
</html>
Unfortunately, I am unable to get the required result with the aforesaid code.
In the list box it is showing:
--Please Select--
“ + val + “
I would like to get country name along with corresponding value as:
--Please Select—
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
I shall be highly obliged if anyone help me in this regard.
I think there is problem in your data file it is not a json file.and you should be using $.getJSON inside script tag. try using like this once you modified your file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<select id="countries" name="countries">
<option selected="selected" value="--Please Select--">--Please Select--</option>
<script>
$.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt").success( function( json ) {
console.log(json);
$.each(json, function(key, val) {
console.log(key,val);
$('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
});
}).error(function(error){
console.log(error);// currently your data will come here in error.
});
</script>
</select>
</div>
</body>
</html>
but if you still want to countinue with the current file.then replace the script with this:
<script>
$.getJSON("https://googledrive.com/host/0BxPZgr7ebTBdXzdMVWRZZ3FSSjA/country.txt").success( function( json ) {
console.log(json);
$.each(json, function(key, val) {
console.log(key,val);
$('select[name=countries]').append( "<option value='" + key + "'>" + val + "</option>" );
});
}).error(function(error){
var x= error.responseText.split('\r\n');
console.log(x);
for(y in x){
var z=x[y].split(":");
if(z[0].length > 1){
$('select[name=countries]').append( "<option value='" + z[0] + "'>" + z[1] + "</option>" );
}
}
});