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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Location
    in .........
    Posts
    260
    Thanks
    183
    Thanked 0 Times in 0 Posts

    problem in select menu

    I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:

    Code:
    <select name="cities" >
    <script type="text/javascript">
    document.write("<option value=''>city1</option>");
    document.write("<option value=''>city2</option>");
    document.write("<option value=''>city3</option>");
    </script>
    </select>

    but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You can't use document.write() for in this context, since this function executes at the time of page loads.

    Google for chained+select+javascript
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Mido™ (09-03-2010)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by abduraooft View Post
    You can't use document.write() for in this context, since this function executes at the time of page loads.
    No no , I believe you have erred.
    Check this ...


    Code:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <span>Chained boxs </span> 
    
    
    <script type="text/javascript">
    (function(){
    document.write("<select onchange='if(this.selectedIndex){this.nextSibling.options[0].text=\"hiya\"}else{this.nextSibling.options[0].text=\"GoodBye\"}'>")
    document.write("<option value=''>city1</option>");
    document.write("<option value=''>city2</option>");
    document.write("</select>")
    
    document.write("<select>")
    document.write("<option value=''></option>");
    document.write("<option value=''></option>");
    document.write("</select>")
    })()
    
    
    
    
    </script>
    
    </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    Mido™ (09-03-2010)

  • #4
    Regular Coder
    Join Date
    Aug 2009
    Location
    in .........
    Posts
    260
    Thanks
    183
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    No no , I believe you have erred.
    Check this ...


    Code:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <span>Chained boxs </span> 
    
    
    <script type="text/javascript">
    (function(){
    document.write("<select onchange='if(this.selectedIndex){this.nextSibling.options[0].text=\"hiya\"}else{this.nextSibling.options[0].text=\"GoodBye\"}'>")
    document.write("<option value=''>city1</option>");
    document.write("<option value=''>city2</option>");
    document.write("</select>")
    
    document.write("<select>")
    document.write("<option value=''></option>");
    document.write("<option value=''></option>");
    document.write("</select>")
    })()
    
    
    
    
    </script>
    
    </body>
    </html>
    Thanks but I tried your code and I found it didn't fix the problem or gave the solution as the second menu didn't appear or changed when you select an item from the first menu, only a new menu appeared and it's item were hiya or GoodBye which you wrote in the first menu onchange function.

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Location
    in .........
    Posts
    260
    Thanks
    183
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You can't use document.write() for in this context, since this function executes at the time of page loads.

    Google for chained+select+javascript
    Thanks and I searched for it but still didn't find a good example without using Ajax.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Here, try this:
    Code:
    <html>
    <head>
    <title>Category and Subcategory Drop Down Lists Via JavaScript</title>
    <script type="text/javascript">
    // constructor for a SubCat object:
    function SubCat( cn, scn, scnm )
    {
        this.CatNum     = cn;
        this.SubcatNum  = scn;
        this.SubcatName = scnm;
    }
    
    // *************************************************************** 
    // establish the array of subcategory info: 
    var subcatInfo = new Array( 
        new SubCat('1001','3','Beans'),
        new SubCat('1001','4','Corn'),
        new SubCat('1001','5','Miscellaneous'),
        new SubCat('1001','2','Potato'),
        new SubCat('1001','1','Tomato'),
        new SubCat('1002','2','Bran'),
        new SubCat('1002','1','Corn Flakes'),
        new SubCat('1002','6','Miscellaneous'),
        new SubCat('1002','3','Oatmeal'),
        new SubCat('1002','5','Pre-sweetened'),
        new SubCat('1002','4','Rice'),
        new SubCat('1003','5','Miscellaneous'),
        new SubCat('1003','4','Pasta'),
        new SubCat('1003','2','Rice'),
        new SubCat('1003','3','Sugar'),
        new SubCat('1003','1','Wheat'),
        new SubCat('1004','2','Artificial fruit drinks'),
        new SubCat('1004','3','Colas'),
        new SubCat('1004','5','Diet drinks'),
        new SubCat('1004','1','Fruit juices'),
        new SubCat('1004','6','Miscellaneous'),
        new SubCat('1004','4','Root beers'),
        new SubCat('1005','4','Cookies'),
        new SubCat('1005','2','Corn chips'),
        new SubCat('1005','5','Crackers'),
        new SubCat('1005','7','Dips'),
        new SubCat('1005','6','Meat products'),
        new SubCat('1005','3','Popcorn'),
        new SubCat('1005','1','Potato Chips'),
        new SubCat('1006','2','Boxed Chocolates'),
        new SubCat('1006','4','Bulk candies'),
        new SubCat('1006','1','Chocolate'),
        new SubCat('1006','5','Gum'),
        new SubCat('1006','3','Hard candies'),
        new SubCat('1006','6','Other'),
        new SubCat('1007','8','Cakes'),
        new SubCat('1007','9','Cakes, custom decorated'),
        new SubCat('1007','7','Donuts'),
        new SubCat('1007','11','Other'),
        new SubCat('1007','10','Pies'),
        new SubCat('1007','5','Ryes, etc.'),
        new SubCat('1007','6','Speciaty breads, Bakery'),
        new SubCat('1007','3','Wheat'),
        new SubCat('1007','4','Wheat, Bakery'),
        new SubCat('1007','1','White'),
        new SubCat('1007','2','White, Bakery') 
                     ); 
    
    // *************************************************************** 
    
    // this function is called upon a change of main category 
    function doCategory(sel) 
    { 
        var ix; 
        var subcat = sel.form.SubcategorySelect; 
    
        // regardless of what else we do, we wipe out all the 
        // options in the subcategory dropdown by
        // going backwards, removing selected options 
        for ( ix = subcat.options.length - 1; ix >= 0; --ix ) 
        { 
            subcat.options[ix] = null; 
        } 
        // now, did the user select a category? 
        if ( sel.selectedIndex == 0 ) 
        { 
            // no...so give user the "no subcats" msg 
            subcat.options[0] = 
                new Option("-- no subcategories yet --","0"); 
            return; // and we are done 
        } 
        // yes, so get the appropriate subcategories: 
        subcat.options[0] = 
            new Option("-- choose a subcategory below --","0"); 
    
        // what category number was selected?
        var catnum = sel.options[sel.selectedIndex].value; 
        var cursc = 0; 
        for ( ix = 0; ix < subcatInfo.length; ++ix ) 
        { 
            // looking for all subcat's with the requested category number
            var subcatObj = subcatInfo[ix]; 
            if ( subcatObj.CatNum == catnum ) 
            { 
                subcat.options[++cursc] = 
                    new Option( subcatObj.SubcatName, subcatObj.SubcatNum );
            } 
        } 
    } 
    // done with JS code 
    </script>
    </head>
    <body>
    
    <form Name="DemoForm"> 
    What kind of products are you interested in?<br/><br/>
    
    First select a category and then, when the list of subcategories 
    appears, select a subcategory:<br/> 
    
    <select Name="CategorySelect" onchange="doCategory(this);"> 
        <option Value="NONE">-- choose a category below--</option> 
        <option Value='1007'>Breads</option>
        <option Value='1006'>Candies</option>
        <option Value='1001'>Canned goods</option>
        <option Value='1002'>Cereal</option>
        <option Value='1004'>Drinks</option>
        <option Value='1005'>Snack foods</option>
        <option Value='1003'>Staples</option>
    </select> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <select name="SubcategorySelect" >
        <option Value="0">-- no subcategories yet -- 
    </select> 
    </form>
    </body>
    </html>
    Is that what you mean?

    Building the list of subcategory options in that way is easy from PHP or JSP or ASP code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mido™ (09-04-2010)

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Mido™ View Post
    Thanks but I tried your code and I found it didn't fix the problem or gave the solution as the second menu didn't appear or changed when you select an item from the first menu, only a new menu appeared and it's item were hiya or GoodBye which you wrote in the first menu onchange function.
    Well see I quoted the other poster
    that seemed to think document.write()
    could not be used this way and the code
    was for him to comment on .

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Quote Originally Posted by DaveyErwin View Post
    Well see I quoted the other poster
    that seemed to think document.write()
    could not be used this way.
    And it can't be. You created two <select>s, yes, but not in such a way that what is shown in the second one is *dependent* on what is chosen, by the user, from the first one. Your two <select>s will always be the same, no "filtering" provided.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Old Pedant View Post
    And it can't be. You created two <select>s, yes, but not in such a way that what is shown in the second one is *dependent* on what is chosen, by the user, from the first one. Your two <select>s will always be the same, no "filtering" provided.
    Yes, because i was way off on this

    I must use a function and use if or switch in it, so what's the solution?

    so i put document.write in a function using if ?

    also this through me off

    seach for chained+select+javascript

    I didnt quote and i may have paraphrased

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Old Pedant View Post
    And it can't be. You created two <select>s, yes, but not in such a way that what is shown in the second one is *dependent* on what is chosen, by the user, from the first one. Your two <select>s will always be the same, no "filtering" provided.
    Did ya run it ?
    see thats right from the 3 box trhead
    it just sets one option on the second
    of course it could set as many as you would
    like but i choose to set only one option
    which changes when the first box changes
    heres what the original poster had to say

    only a new menu appeared and it's item were hiya or GoodBye

    thats not two options in the same box because i
    only set one option it actually chamges dependant on the first box
    Last edited by DaveyErwin; 09-04-2010 at 01:17 AM.

  • #11
    Regular Coder
    Join Date
    Aug 2009
    Location
    in .........
    Posts
    260
    Thanks
    183
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Here, try this:
    Code:
    <html>
    <head>
    <title>Category and Subcategory Drop Down Lists Via JavaScript</title>
    <script type="text/javascript">
    // constructor for a SubCat object:
    function SubCat( cn, scn, scnm )
    {
        this.CatNum     = cn;
        this.SubcatNum  = scn;
        this.SubcatName = scnm;
    }
    
    // *************************************************************** 
    // establish the array of subcategory info: 
    var subcatInfo = new Array( 
        new SubCat('1001','3','Beans'),
        new SubCat('1001','4','Corn'),
        new SubCat('1001','5','Miscellaneous'),
        new SubCat('1001','2','Potato'),
        new SubCat('1001','1','Tomato'),
        new SubCat('1002','2','Bran'),
        new SubCat('1002','1','Corn Flakes'),
        new SubCat('1002','6','Miscellaneous'),
        new SubCat('1002','3','Oatmeal'),
        new SubCat('1002','5','Pre-sweetened'),
        new SubCat('1002','4','Rice'),
        new SubCat('1003','5','Miscellaneous'),
        new SubCat('1003','4','Pasta'),
        new SubCat('1003','2','Rice'),
        new SubCat('1003','3','Sugar'),
        new SubCat('1003','1','Wheat'),
        new SubCat('1004','2','Artificial fruit drinks'),
        new SubCat('1004','3','Colas'),
        new SubCat('1004','5','Diet drinks'),
        new SubCat('1004','1','Fruit juices'),
        new SubCat('1004','6','Miscellaneous'),
        new SubCat('1004','4','Root beers'),
        new SubCat('1005','4','Cookies'),
        new SubCat('1005','2','Corn chips'),
        new SubCat('1005','5','Crackers'),
        new SubCat('1005','7','Dips'),
        new SubCat('1005','6','Meat products'),
        new SubCat('1005','3','Popcorn'),
        new SubCat('1005','1','Potato Chips'),
        new SubCat('1006','2','Boxed Chocolates'),
        new SubCat('1006','4','Bulk candies'),
        new SubCat('1006','1','Chocolate'),
        new SubCat('1006','5','Gum'),
        new SubCat('1006','3','Hard candies'),
        new SubCat('1006','6','Other'),
        new SubCat('1007','8','Cakes'),
        new SubCat('1007','9','Cakes, custom decorated'),
        new SubCat('1007','7','Donuts'),
        new SubCat('1007','11','Other'),
        new SubCat('1007','10','Pies'),
        new SubCat('1007','5','Ryes, etc.'),
        new SubCat('1007','6','Speciaty breads, Bakery'),
        new SubCat('1007','3','Wheat'),
        new SubCat('1007','4','Wheat, Bakery'),
        new SubCat('1007','1','White'),
        new SubCat('1007','2','White, Bakery') 
                     ); 
    
    // *************************************************************** 
    
    // this function is called upon a change of main category 
    function doCategory(sel) 
    { 
        var ix; 
        var subcat = sel.form.SubcategorySelect; 
    
        // regardless of what else we do, we wipe out all the 
        // options in the subcategory dropdown by
        // going backwards, removing selected options 
        for ( ix = subcat.options.length - 1; ix >= 0; --ix ) 
        { 
            subcat.options[ix] = null; 
        } 
        // now, did the user select a category? 
        if ( sel.selectedIndex == 0 ) 
        { 
            // no...so give user the "no subcats" msg 
            subcat.options[0] = 
                new Option("-- no subcategories yet --","0"); 
            return; // and we are done 
        } 
        // yes, so get the appropriate subcategories: 
        subcat.options[0] = 
            new Option("-- choose a subcategory below --","0"); 
    
        // what category number was selected?
        var catnum = sel.options[sel.selectedIndex].value; 
        var cursc = 0; 
        for ( ix = 0; ix < subcatInfo.length; ++ix ) 
        { 
            // looking for all subcat's with the requested category number
            var subcatObj = subcatInfo[ix]; 
            if ( subcatObj.CatNum == catnum ) 
            { 
                subcat.options[++cursc] = 
                    new Option( subcatObj.SubcatName, subcatObj.SubcatNum );
            } 
        } 
    } 
    // done with JS code 
    </script>
    </head>
    <body>
    
    <form Name="DemoForm"> 
    What kind of products are you interested in?<br/><br/>
    
    First select a category and then, when the list of subcategories 
    appears, select a subcategory:<br/> 
    
    <select Name="CategorySelect" onchange="doCategory(this);"> 
        <option Value="NONE">-- choose a category below--</option> 
        <option Value='1007'>Breads</option>
        <option Value='1006'>Candies</option>
        <option Value='1001'>Canned goods</option>
        <option Value='1002'>Cereal</option>
        <option Value='1004'>Drinks</option>
        <option Value='1005'>Snack foods</option>
        <option Value='1003'>Staples</option>
    </select> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <select name="SubcategorySelect" >
        <option Value="0">-- no subcategories yet -- 
    </select> 
    </form>
    </body>
    </html>
    Is that what you mean?

    Building the list of subcategory options in that way is easy from PHP or JSP or ASP code.
    Thanks and it's what I mean, but I tried another way I found it more easy for me, but it have a problem in adding the values of every item as I couldn't find how to add it, so hope you or any other one could help in this:

    Code:
    function swicthcity()
    {
    selmenu = document.getElementById('countries');
    var theselected = selmenu.options[selmenu.selectedIndex].value;
    
    	
    if(theselected == "Egypt")
    {
    	var CITY = new Array( "Cairo" , "Alexandria" , "Sharm" , "Luxor" );
    	var zonesl = CITY.length;
    		var i=0;
    		while(i<zonesl)
    		{
    			document.getElementById('cities').options[i] = new Option(CITY[i]);
    			i++;
    		}
    }
    	
    if(theselected == "Germany")
    {
    	var CITY = new Array( "Munchen" , "Dortmund" , "Berlin" , "Koln" );
    	var zonesl = CITY.length;
    		var i=0;
    		while(i<zonesl)
    		{
    			document.getElementById('cities').options[i] = new Option(CITY[i]);
    			i++;
    		}
    }
    		
    
    }

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    That's really BAD code. Ugly.

    In that ugly code, you have to create a special list for each choice in the first <select>.

    Is that what you mean by "adding the values of every item"? Yes, it's really hard with that ugly code.

    My code is EASY to get all the values for all the options. If your server side code is PHP or ASP or JSP, it's especially easy. If you are not using server side code, then yes, mine could be simplified a bit.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mido™ (09-04-2010)

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Davey: Tell you what. You try *MY* code so you can understand what this person wanted. And what most people want when they talk about "dependent selects" or "multi-level selects" or "dependent drop downs" or, as this person wrote, "second menu items should be determined based on the selected item of the first menu".

    It's one of *THE* most common requests in this forum. I would guess it is asked for at least 3 or 4 times a week, on average.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Here is the original question .

    Quote Originally Posted by Mido™ View Post
    I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:

    Code:
    <select name="cities" >
    <script type="text/javascript">
    document.write("<option value=''>city1</option>");
    document.write("<option value=''>city2</option>");
    document.write("<option value=''>city3</option>");
    </script>
    </select>

    but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution?

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Here, maybe this is what you want:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var countries = [
       { country: "Egypt", cities: ["Cairo","Alexandria","Sharm","Luxor"] },
       { country: "Germany", cities: ["Munchen","Dortmund","Berlin","Koln"] },
       { country: "USA", cities: ["New York","Chicago","Dallas","Seattle","Los Angeles"] },
       { country: "Japan", cities: ["Tokyo","Osaka","Kyoto","Sapporo"] }
       ];
    
    
    function switchCountry(selCountry)
    {
        var citySel = selCountry.form.City;
        for ( var s = citySel.options.length-1; s > 0; --s )
        {
            citySel.options[s] = null;
        }
    
        var chosen = selCountry.options[selCountry.selectedIndex].text;
        for ( var c = 0; c < countries.length; ++c )
        {
            if ( countries[c].country == chosen )
            {
                var cList = countries[c].cities;
                for ( var i = 0; i < cList.length; ++i )
                {
                    citySel.options[i+1] = new Option(cList[i],cList[i]);
                }
            }
        }
    }
    </script>
    </head>
    <body>
    <form>
    <select name="Country" onchange="switchCountry(this);">
    <option>choose country</option>
    <option>Egypt</option>
    <option>Germany</option>
    <option>Japan</option>
    <option>USA</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select name="City">
    <option>choose city</option>
    </select>
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mido™ (09-04-2010)


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)


    Posting Permissions

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