Some of us just do better if we can see code. I've tried to avoid it, but I'll give in just a bit and show you some fragments. If you are smart or lazy, you will try to use a library to do as much as you can, since the library will work around the issues related to browser differences. otherwise, you get to code around them. I use dojo, because it provides a lot of what I need and I am used to it by now. Look around and find one that best suits your needs. Since every library is different, I won't give you any examples of the calls to the server. Just read the manual to determine the proper form.
On the server side, you will have a PHP script to retrieve the models. You get the brand name, and ask your database to give you a list of models for that brand. If you don't know PHP, it's a pretty trivial language, although it has a nice syntax for classes that make it more Java-like than JavaScript is. Trust me, you can figure out what's going on here. The only complication is that I'm retrieving the answers from a MySQL database, but the functions are pretty straightforward.
// This is PHP code: variables begin '$'
$brand = $_REQUEST[`brand']; // get brand from URL or POST data
$sql = "SELECT Model FROM Autos WHERE Brand='$brand'";
$result = mysql_query($sql) or die(`Query failed'); // run the query
$model_count = mysql_num_rows($result); // how many models are there?
echo `<models>;' /// start the XML list
for ($i=0; $i<$model_count; $i++) {
$row = mysql_fetch_array($result); // get next row
echo `<model>' . $row[0] . `</model>'; // dot is string concat
}
echo `</models>';
And this produced the following XML for "Ford" (somewhat oversimplified, of course):
<models><model>Focus</model><model>Fusion</model><model>Taurus</model></models>
There's no formatting here, unless you choose to emit it. XML doesn't care. Of course, you should produce a proper XML header line (a bit outside the scope of this article) and also have PHP produce a header to tell your browser that it is sending XML data. This is not necessary for some browsers, but it does not hurt, and it makes your web page more browser-agnostic.
This is all server-side code, since that's where PHP runs. What happens when you deliver this XML string to your callback? If you are using a library and told it you were expecting XML data back, it will create the proper document structure for you and present you with the XML tree as a JavaScript object. This is why we use libraries.
Given that you now have a tree, what do you do with it? Well, one obvious choice would be to write the following client-side JavaScript code:
var modelTree = responseObject; // what the server sent you
var models = modelTree.getElementsByTagName(`model');
What we just created was an array of models, because each one had a tag of "model." We only looked in the server response, not in the whole web page, because that's all we're interested in for now. Each element in the array contains the text associated with that model tag (e.g., "Focus"). Now you can walk the array and do what needs to be done. Let's do this the easy way, by building HTML on-the-fly:
// This is JavaScript code that produces XHTML dynamically
var html = `<select id="models">';
for (i=0; i<models.length; i++)
html += `<option value="' + models[i] +
'">' + models[i] + `</option>';
html += `</select>'
Congratulations, you just created code for a drop-down list dynamically, based on what you found in a database. Note that the name of the model is used twice in the above code. That's there for a reason - we use it as both the value of the option and the displayed text. Some browsers (e.g., Firefox) will use the text as the value if no value is specified; Internet Explorer won't, so it is best to always specify a value for each option.
If the database content changes, your list will change and you won't have to rewrite any web site code. The web server (and its associated database server) always provides up-to-date information. When you are done, this string can be inserted into the inner HTML of the parent node. It is traditional to insert things into either a DIV element or a SPAN element, depending on how you want the display to look.
Note also that there are several alternative ways to build the option list for a SELECT node. This is not necessarily the best choice, but it is easy to understand. JavaScript has a built-in Option object that is very versatile, and is often a good choice.
Don't be confused by the use of `+' in JavaScript. It's the string concatenation operator, just like `.' is in PHP. In fact, the two languages are similar enough to be confusing at first. You may lose track of which one you are writing in, especially since you are probably writing in HTML and CSS at the same time. I like to describe this as writing a book in four languages simultaneously. No one said this was supposed to be easy.
Nextinsert content here