Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    for loop to null <options>

    Hi,

    I am trying to make two select boxes 'country', and 'area', the contents of which are php generated. I would like the 'area' select field to only show the areas present in the selected country. I am using the following function, which runs onChange of the 'country' select field, to try to null the fields in the 'area' drop down that do not correspond to the chosen country. Php, of course, gives me all of the areas in my database, but I would like to limit them based on the selection of country. When the function runs I get the following error:

    "document.info.area.options[...].id is null or not an object."

    Also two of the correct options will be gone.

    I think I am not using the for loop properly. Any suggestions would be greatly appreciated.


    function limitOptions() {
    var dropDown = document.info.country.options[document.info.country.selectedIndex].value
    for (var i = 1; i <= document.info.area.options.length; i++){
    if (document.info.area.options[i].id !== dropDown){
    document.info.area.options[i] = null
    }
    }

    }

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Do you really want the id or the value?

    if (document.info.area.options[i].value != dropDown){

  • #3
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    value or id

    I am looking for the id in the area submit field, the value is what I will submit with the form.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Option tags don't have id attribute. Can you post the whole codes or the link to it?

  • #5
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    The full code

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE = "JavaScript">
    <!--
    function limitOptions() {
    var dropDown = document.info.country.options[document.info.country.selectedIndex].value
    for (var i = 1; i <= document.info.area.options.length; i++){
    if (document.info.area.options[i].id !== dropDown){
    document.info.area.options[i] = null
    }
    }
    }
    //-->
    </SCRIPT>
    </head>

    <body>
    <form name= "info">
    <select name="country" id="country" onChange ="limitOptions()" >
    <option value = 0>--select--</option>

    <?php
    $dbcnx = @mysql_connect ('localhost','','');
    if (!$dbcnx) {
    die('<p> Unable to connect to the database server at this time.</p>');
    }
    $dbbooks = @mysql_select_db ('books');
    if (!dbbooks) {
    die ('<p> The books database is inaccessible at this time.</p>');
    }
    $result = @mysql_query ('SELECT ID, Name FROM country');
    while ($land = mysql_fetch_array($result)) {
    $cid = $land ['ID'];
    $countries = $land ['Name'];
    echo ("<option value = '$cid'>$countries</option>\n");
    }
    ?>
    </select>

    <select name="area" id="area">
    <option value="0" id="0">--select--</option>
    <?php
    $result2 = @mysql_query ('SELECT ID, Name, CID FROM area');
    while ($city = mysql_fetch_array($result2)) {
    $aid = $city ['ID'];
    $cities = $city ['Name'];
    $countId = $city ['CID'];
    echo ("<option value = '$aid' id = '$countId'>$cities</option>\n");
    }
    ?>

    </select>
    <input type ="submit" value="submit">
    </form>
    </body>
    </html>

    here it is. I always thought that options had an id attribute, but I could be mistaken. The reason I think they do is because the code almost works, I am just getting snagged somewhere. Thanks for the help in advance.

    Dan

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Just put both id and cid in the value attribute separated by something (like |)

    <select name="country" id="country" onChange ="limitOptions(this)" >
    ...
    </select>

    <select name="area" id="area">
    ...
    echo ("<option value = '$aid|$countId'>$cities</option>\n");

    Then the js code:

    Code:
    function limitOptions(selCountry) {
      var arr, rIndex=1;
      var dropDown = selCountry.options[selCountry.selectedIndex].value;
      var selArea = selCountry.form.area;
      var selLen = selArea.options.length;
      for (var i = 1; i < selLen; i++){
        arr = selArea.options[rIndex].value.split("|");
        if (arr[1] != dropDown){
          selArea.options[rIndex] = null;
        }
        else rIndex++; //running index
      } 
    }
    Take note that when an option is set to null, all options below it go up so each option index goes down one notch. Thus the running index, rIndex. It increments only when an option contains the id. If not, the option is deleted and the running index should stay the same for the next iteration since the item below the deleted option takes over its index position.

    Hope that makes sense.

  • #7
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    Thanks Glenn, I will give this a try and let you know how it turns out.

  • #8
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved

    Thanks again, the running index solved my problem. For future reference, the option tag "id" attribute does seem to work.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    User-defined attributes may only work on some browsers.

    Happy to help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •