• 0

[jquery] Populate select box from external file?

Asked by Axel,

 Share

Question

Grand Master

Axel

Posted
Posted

Hi all,

I suspect what I'm trying to achieve is relatively simple to some of you experts but I'm stumped.

I want to create a CSV file with a bunch of addresses. The address will be in one column, and the corresponding google maps link in the column next to it.

I then want to populate an option box with the addresses. Then have the relevant google maps link fill a text box below the address that has been selected.

Does this make sense?

Many thanks,

Alex

9 answers to this question

Recommended Posts

  • 0
Grand Master

lnmnky

Posted
Posted

Look up the $.load() in query. That can reference an external file.

Or just $.ajax() and then manipulate the results. Split the string on the comma.

You might be better off with a proper XML file, as it might be easier to grab the nodes. Then you don't have to worry about the NewLines and commas.

Any reason it's a CSV?

  • 0
Grand Master

Axel

Posted
  • Author
Posted
  On 20/05/2013 at 17:36, lunamonkey said:

Any reason it's a CSV?

Only to make it easier for the people in the office to edit the value's if and when they change. I'm definitely not a pro with this stuff so my solution may be a bit arse about face.

I'm trying to create a form to stick on the company's web portal. The idea is that the user (in the office) can fill in the fields which then get loaded into a standard email template and then sent to the client in a standard email format.

i.e.

Hi NAME,

Your appointment is booked on DATE at TIME at LOCATION. etc.

It's all manual at the moment so it's a bit of a nightmare. Anything to streamline to operations!

  • 0
Grand Master

threetonesun

Posted
Posted
  On 20/05/2013 at 17:22, Axel said:

I want to create a CSV file with a bunch of addresses. The address will be in one column, and the corresponding google maps link in the column next to it.

Really? You really want to do this? :laugh:

Sounds like the perfect place to use a database of some sort, be it XML or SQL of some sort. I think, based on your use case, you'll get a very nice implementation up and running with a CSV list, and then someone will ask for a change and it will be a right pain to fix it.

  • 0
Enthusiast

SinsOfCube

Posted
Posted

Instead of CSV or XML you could use JSON, it's very similar to CSV, but a lot easier to work with in javascript.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
&lt;script src="jquery-2.0.0.min.js"></script>;script&gt;
//Global variable with some example json entries
var jsondata = [
	{"address":"Some address 1","link":"http://maps.google.com/1"},
	{"address":"Some address 2","link":"http://maps.google.com/2"}
];

$(function(){
	 //Use Jquery's getJSON, it automaticly parses the data into a usable json object
	 $.getJSON( 'file.json', function( data ){
		  //Put the retreived json in the global variable
		  jsondata = data;

		  var mySelect = $('#address');

		  //Go through each object in the jsondata
		  $.each( jsondata, function( index, row ){
			  //The array index as a value of the option
			  mySelect.append( $( '&lt;option&gt;&lt;/option&gt;' ).val( index ).html( row.address ) );
		   });
	 });

	$('#address').change( function(){
		//Get the array index from the select element and use it with the json array
		$('#link').val( jsondata[ $(this).val() ].link );
	});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;select id="address" name="test"&gt;&lt;option disabled&gt;Select Address&lt;/option&gt;&lt;/select&gt;
&lt;input type="text" id="link"&gt;
&lt;/body&gt;
&lt;/html&gt;

More info on json: http://json.org/example.html

The contents of file.json should be as followed:

[
	{"address":"Some address 1","link":"http://maps.google.com/1"},
	{"address":"Some address 2","link":"http://maps.google.com/2"},
    {"address":"Some address 3","link":"http://maps.google.com/3"}
]

  • lnmnky and Axel
  • Like 2
  • 0
Enthusiast

killerninja

Posted
Posted
  On 20/05/2013 at 17:22, Axel said:

Hi all,

I suspect what I'm trying to achieve is relatively simple to some of you experts but I'm stumped.

I want to create a CSV file with a bunch of addresses. The address will be in one column, and the corresponding google maps link in the column next to it.

I then want to populate an option box with the addresses. Then have the relevant google maps link fill a text box below the address that has been selected.

Does this make sense?

Many thanks,

Alex

Just go to settings, click on file type, look at CSV and then punt a dog in the vagina

  • 0
Grand Master

Axel

Posted
  • Author
Posted

Thanks for all the responses. I really like the JSON idea SinsOfCube. For the time being I've just solved it by loading a bunch of addresses from a .txt file and then just generating a google maps link. Dirty solution I know but it seems to work:

&lt;label&gt;Location
&lt;span class="small"&gt;Please select the location&lt;/span&gt;
&lt;/label&gt;
&lt;select name="location" id="location" &gt;
&lt;?php
$locationlist = file('locationlist.txt', FILE_IGNORE_NEW_LINES);
foreach ($locationlist as $value) {
echo "\n";
echo '&lt;option value="'.$value.'"&gt;'.$value.'&lt;/option&gt;';
echo "\n";
}
?&gt;
&lt;/select&gt;


$maplink = 'https://maps.google.co.uk/maps?q='.str_replace, "+", $location);

This: 

10 Downing Street, London, SW1A 2AA

Becomes: 

https://maps.google.co.uk/maps?qA&hl=en&=10+Downing+Street,+London,+SW1A+2AA

If these methods end up failing me then I suppose I'll have to resort to killerninja's advice and punt a dog in the vagina.

  • killerninja
  • Like 1
  • 0
Grand Master

lnmnky

Posted
Posted

Sins has totally just built what I was going to build after I got back from the tip. (But I was going to go longhand with CSV.)

Does the quick-select statement function as expected? Isn't this too shallow to find the correct item?

jsondata[ $(this).val() ].link

Doesn't that expect a one dimensional object? Where-as yours is two objects deep. (I haven't tried it...)

Anyway, dinner time.

  • 0
Enthusiast

SinsOfCube

Posted
Posted

jsondata is an array which holds the objects containing the address and google maps link properties. So jsondata[ x ] returns an object and with the ".propertyName" after it, you get the property value, which is the 2nd dimension. You could also write it as "jsondata[ $(this).val() ][ 'link' ]", which makes it more noticable that it has 2 dimensions.

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • SteamOS falls to lowest adoption level in years as Steam on Linux use rises

      By dustojnikhummer · Posted

      I guess more Windows users are switching on their desktops/laptops than people buying new Steam Decks. I wouldn't be surprised. Deck doesn't have the mainstream appeal of other handhelds, usually people who would want one already have one. Glad to see Linux go up!
    • Windows 11's growth slowed down in May 2025

      By Epaminombas · Posted

      Any news about Windows and Microsoft always brings up crazy people saying; - Windows 11 is terrible, it destroys my hardware, it had sex with my wife, it told the FBI that I visit shemale sites, it collects my data where I get illegal anime. Never use Windows 11, go for Linux and it will never have sex with your wife.
    • QOwnNotes 25.6.0

      By Copernic · Posted

      QOwnNotes 25.6.0 by Razvan Serea QOwnNotes is a open source (GPL) plain-text file notepad with markdown support and todo list manager for GNU/Linux, Mac OS X and Windows, that (optionally) works together with the notes application of ownCloud (or Nextcloud). So you are able to write down your thoughts with QOwnNotes and edit or search for them later from your mobile device (like with CloudNotes) or the ownCloud web-service. The notes are stored as plain text files and you can sync them with your ownCloud sync client. Of course other software, like Dropbox, Syncthing, Seafile or BitTorrent Sync can be used too. Features: the notes folder can be freely chosen (multiple note folders can be used) sub-string searching of notes is possible and search results are highlighted in the notes application can be operated with customizable keyboard shortcuts external changes of note files are watched (notes or note list are reloaded) older versions of your notes can be restored from your ownCloud server trashed notes can be restored from your ownCloud server differences between current note and externally changed note are showed in a dialog markdown highlighting of notes and a markdown preview mode notes are getting their name from the first line of the note text (just like in the ownCloud notes web-application) and the note text files are automatically renamed, if the the first line changes compatible with the notes web-application of ownCloud and mobile ownCloud notes applications compatible with ownCloud's selective sync feature by supporting an unlimited amount of note folders with the ability to choose the respective folder on your server manage your ownCloud todo lists (ownCloud tasks or Tasks Plus / Calendar Plus) or use an other CalDAV server to sync your tasks to encryption of notes (AES-256 is built in or you can use custom encryption methods like Keybase.io (encryption-keybase.qml) or PGP (encryption-pgp.qml)) dark mode theme support theming support for the markdown syntax highlighting all panels can be placed wherever you want, they can even float or stack (fully dockable) support for freedesktop theme icons, you can use QOwnNotes with your native desktop icons and with your favorite dark desktop theme support for hierarchical note tagging and note subfolders support for sharing notes on your ownCloud server portable mode for carrying QOwnNotes around on USB sticks Evernote import QOwnNotes is available in many different languages like English, German, French, Polish, Chinese, Japanese, Russian, Portuguese, Hungarian, Dutch and Spanish Changes in QOwnNotes 25.6.0: QOwnNotes now builds with with Botan 3, when built with the system Botan library (cmake build parameter -DBUILD_WITH_SYSTEM_BOTAN=ON), because of the end of life of Botan 2 (for #2786) Keep in mind that Botan 3 needs C++20, which causes issues on Qt5 QMake and Qt5 will still use the internal Botan 2 amalgamation Creating an amalgamation Botan 3 did work, but caused major issues with various build processes The filename in checksum files of the Qt6 AppImages in the releases on GitHub was fixed (for #3286) Download: QOwnNotes 25.6.0 | 37.3 MB (Open Source) Download: QOwnNotes for Other Operating Systems View: QOwnNotes Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Windows 11's growth slowed down in May 2025

      By tsupersonic · Posted

      There are lots of older PC's that are now going to be unsupported on W10, but for modern systems, you should be able to update to W11. Even so, there are ways to bypass the official hardware requirements as well as the MSA (which imo is the bigger annoyance). My only gripe with W11 is all the telemetry collection / bloatware - yes, it is a problem compared to W10 and Linux.
    • Tesla Cybertruck

      By +primortal · Posted

  • Recent Achievements

    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • One Month Later
      lilred1938 earned a badge
      One Month Later
    • Week One Done
      lilred1938 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      148
    2. 2
      Xenon
      132
    3. 3
      ATLien_0
      123
    4. 4
      +Edouard
      103
    5. 5
      snowy owl
      96
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!