murfitUK Posted February 10, 2008 Share Posted February 10, 2008 I'm really trying to figure out javascript so I can do this sort of thing on my own but am running up against time limits so...Two select / option fields. The first is the magazine issue number and the second is a list of adverts that the reader can reply to. Say issue 56 has 88 adverts (1-88), 57 has 95, 58 has 47 etc. I've got an array with 56=>88, 57=>95, 58=>47 etc. The reader selects the issue and then I would like the second select field to show 1, 2 up to the number of ads. Eg selecting issue 56 will show 1 to 88, but selecting issue 58 will only show 1-47.The website will not have any details of the magazine adverts - I just need the two numbers (issue/advert) eg 57/68 to post to the next page.I've looked through some javascript scripts where the second list contains well-defined options eg choosing fruit brings up apples, oranges, melons and choosing vegetables brings up carrots, parsnips etc, but I don't know how to translate that into what I'm trying to do.Any tips / pointers / help will be gratefully received.Thanks. Link to comment Share on other sites More sharing options...
jhecht Posted February 10, 2008 Share Posted February 10, 2008 I don't quite get what an Advert is, but I'll try to help you the best I can. So from what I understand your HTML must look(more or less) like this: <html> <head> <title>Page</title> </head> <body> <form action="otherPage.php" method="post"> <select name="issue"> <option value="56">56</option> <option value="57">57</option> <option value="58">58</option> </select> | <select name="advert"> <!-- leave this blank for right now --> </select> </form> </body> </html> Now there are 2 ways I can see this working. First is that you have to hand code all of the limiting numbers in an array in the onchange function for the first select. Second, is that you make a simple database with these fields: issue_id int unique not null auto_increment, advent_begin int not null default 1, advent_end int not null default 10, Issue ID is just an id of the issue. I.E. it's just there to distinguish what issue number where on. An example row of this would be56 | 1 | 88Ajax would then submit the result of the first select option to a PHP page, which would then get the 2 numbers and return them in some Javascript friendly format(or you could even have PHP do this for you) and then javascript(or PHP) would just loop through 2 numbers until finished, you would then update the second SELECT and voila. i'll make a quick example for you(I use MooTools. Download it if you dont use it, it's a nice little thing http://mootools.net/ ) <html> <head> <title>Page</title> <script type="text/javascript" src="path/to/mootools.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ $$('form.select').each(function(form){ var selects = form.getElementsByTagName('select'); //Gets the selects from the form being passed var issues = selects[0]; //Gets the issues select option; var advert = selects[1]; issues.addEvent('change',function(){ var ajx = new Ajax('yourPHPPage.php',{onComplete:function(){ var arr = this.response.text; eval('var nums='+arr+';'); for(var i=nums[0];i<nums[1];i++){ var opt = new Element('option'); opt.setHTML(i); opt.setAttribute('value',i); advert.adopt(opt); } }}); //end ajx });//End issues.addEvent });//end form.select.each }); </script> </head> <body> <form action="otherPage.php" method="post" class="select"> <select name="issue"> <option value="56">56</option> <option value="57">57</option> <option value="58">58</option> </select> | <select name="advert"> <!-- leave this blank for right now --> </select> </form> </body> </html> Keep in mind you have PHP loop through the numbers itself, then you could just use advert.setHTML(this.response.text);Any questions, feel free to ask. I know its a bit confusing, especially for someone newer to JS. Link to comment Share on other sites More sharing options...
jeffman Posted February 10, 2008 Share Posted February 10, 2008 I wrote most of this before JHecht posted, so consider it another option.This code works in FF 2.0.0.11 and MSIE7. I think it will work in IE6. At least, I've bent over backwards in the attempt to make it do so. The code is less than elegant. Blame MS. The weaknesses surrounding their select and option methods of any variety are well-known. But, as I said, the code works. <body> Select an issue: <select name="issue" id="issue" onchange='loadOptions(this.value)'> <option value="0" id='option0' selected> </option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Select an ad: <select name="num" id="num"></select> <script> myArray = [, 10, 15, 20]; //you supply the ACTUAL array function loadOptions(x){ var iss = document.getElementById('issue'); if (iss.options[0].value == '0'){ iss.remove(0); } var num = document.getElementById('num'); num.options.length = 0; var opt; var len = myArray[x]; for (var i = 1; i <= len; i++){ opt = document.createElement('option'); opt.value = i; opt.text = '' + i; try{ num.add(opt, null); } catch (ex){ num.add(opt); } } num.disabled = false; } </script> </body> Just so you'll know, I'd have preferred to work with Node methods. (1) I've read that IE6 doesn't like them when working with select/options. I don't have it so I cannot attest to this. Anyway, (2) IE7 doesn't like having text assigned to an option if you plan to append the option like a node. So.But then they have the @$!* to use a different add(option) method than everyone else; hence the try/catch model advocated by w3schools that I've used above.The iss.remove(0) call (only executed on the first selection) lets us use the onChange method to trigger the second menu. Otherwise, unless you preload the second menu, there's no way for the user to select "1" without first selecting another value and then coming back to "1". Feel free to change that. Link to comment Share on other sites More sharing options...
murfitUK Posted February 11, 2008 Author Share Posted February 11, 2008 Thank you both very much. I've got it working now. Deadline met - panic averted. Phew!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.