• 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

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

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>
<script src="jquery-2.0.0.min.js"></script>
<script>
//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( $( '<option></option>' ).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 );
	});
});
</script>
</head>
<body>
<select id="address" name="test"><option disabled>Select Address</option></select>
<input type="text" id="link">
</body>
</html>

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

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:


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


$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

    • Louis Rossmann suing Samsung over "990 Pro SSD warranty scam"

      By binaryzero · Posted

      Lol I had one of these turn faulty in Jan, guess it wasn't just bad luck lol
    • Louis Rossmann suing Samsung over "990 Pro SSD warranty scam"

      By Setnom · Posted

      I'm team Rossmann all the way. I have the exact same NVME, altough not in an array like him.
    • Spotify finally removes the disco ball app icon in the latest update

      By testman · Posted

      It had gone weeks ago. Although thinking about it I'm on the beta.
    • Louis Rossmann suing Samsung over "990 Pro SSD warranty scam"

      By RejZoR · Posted

      They thought value of their goods would forever only drop like it used to and didn't account for sudden increase in price because of all the Ai hype. Tough luck Samsung, don't try to weasel this one out. Also American customer protection laws are a**. In Europe, you need to be compensated for a functioning product of same or better characteristics (not same price point as when it was originally bought!) if it can't be repaired and when you receive a replacement product your warranty starts from scratch because you received a different item than you previously had and old warranty thus cannot apply to it anymore. If your actual item was successfully repaired, warranty gets extended for the period the item was in service. If item is repaired to a significant extent, warranty also starts over from scratch because major part of it was replaced. Americans need to fight to get this kind of consumer protections because they are constantly getting screwed over.
    • Microsoft releases new Windows 11 Media Creation Tool with the latest updates

      By TarasBuria · Posted

      Microsoft releases new Windows 11 Media Creation Tool with the latest updates by Taras Buria Patch Tuesday updates arrive every month, bringing users new features and security updates. To make sure customers have access to the most recent images, Microsoft also releases updates to the Media Creation Tool app, its official utility for Windows 11 installation. Today, the company pushed new ISOs to Media Creation Tool, allowing you to create images with the June 2026 Patch Tuesday updates. With the latest update, the Media Creation Tool now downloads KB5094126. It is Windows 11 version 25H2, build 26200.8655, which is also available via Windows Update. Note that the app itself remains on the previous version, which you can check in Properties > Details. The only change is that it now downloads a more recent Windows 11 build, so the only way to check is to download an ISO. The June 2026 Patch Tuesday update is a special release for Windows 11, as it brings a new performance profile to make the operating system more responsive and snappier when rendering various user interface surfaces, including the Start menu, quick settings, and more. It does so by spiking processor speeds for a brief moment, resulting in higher loads for a second or two. The so-called “Low latency profile” is rolling out gradually, but you can force-enable it with the ViVeTool app. Other changes include webcam improvements, Task Manager updates, shared audio support, and more. You can download the Media Creation Tool app from the official Microsoft website using this link. Besides MCT, Microsoft lets you download Windows 11 ISO as a file directly from the official Windows 11 website. However, you will need a third-party app to write it to your USB drive. Check out this guide if you want to know how to do that.

  • Recent Achievements

    • Week One Done
      davidbazooked earned a badge
      Week One Done
    • One Month Later
      Jamswaz earned a badge
      One Month Later
    • Week One Done
      Jamswaz earned a badge
      Week One Done
    • Rookie
      Marzoid went up a rank
      Rookie
    • Community Regular
      coch went up a rank
      Community Regular

  • Popular Contributors

    1. 1
      +primortal
      511
    2. 2
      PsYcHoKiLLa
      184
    3. 3
      +Edouard
      159
    4. 4
      Steven P.
      83
    5. 5
      ATLien_0
      75
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!