Web Analytics Made Easy -
StatCounter sort drop-down menu with javascript - CodingForum

Announcement

Collapse
No announcement yet.

sort drop-down menu with javascript

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • sort drop-down menu with javascript

    Code:
    <select name="city" style="font-size:9px" onChange="form.submit()">
    <%
    set rscitycode = con.execute("select CityCode from dbo_tp_city where ProvinceName = '"& state &"' order by CityCode asc")
    do until rscitycode.eof
    set rscityname = con.execute("select dbo_tp_cityname.CityName,dbo_tp_city.CityCode from dbo_tp_cityname,dbo_tp_city where dbo_tp_city.CityCode = '"& rscitycode("CityCode") &"' and dbo_tp_cityname.CityCode = '"& rscitycode("CityCode") &"' order by dbo_tp_cityname.CityName")
    %>
    <option value="<%=rscityname("CityName")%>"><%=rscityname("CityName")%></option>
    <% 
    rscitycode.movenext
    loop
    %>
    </select>
    Is there a way to sort this drop-down alphabetically with ASP/Javascript?

    TIA.

    Picco
    Zend Certified Engineer | Ayrshire Minis - a Mini E-Community | Ayrshire-Based Web Developer

  • #2
    Try joining the 2 sql statements into 1.

    Code:
    "select ct.CityCode, ctname.CityName from dbo_tp_city ct, dbo_tp_cityname ctname where ct.ProvinceName = '"& state &"' and ctname.CityCode=ct.CityCode order by ctname.CityName asc"
    Glenn
    vBulletin Mods That Rock!

    Comment


    • #3
      what does the ct represent?
      Zend Certified Engineer | Ayrshire Minis - a Mini E-Community | Ayrshire-Based Web Developer

      Comment


      • #4
        it seems to just crash my DB???
        Zend Certified Engineer | Ayrshire Minis - a Mini E-Community | Ayrshire-Based Web Developer

        Comment


        • #5
          the select options can be collected in an array, the array sorted by the text or value of each option and the select reconstructed from the array


          If interested I can let you have code examples tonight

          as used on

          http://homepage.ntlworld.com/vwphill...Compendium.htm
          Vic

          God Loves You and will never love you less.

          http://www.vicsjavascripts.org/Home.htm

          If my post has been useful please donate to http://www.operationsmile.org.uk/

          Comment


          • #6
            Code:
            <html>
            <head>
            <script>
            // Sort Array (02-08-2005)
            // by Vic Phillips [url]http://www.vicsjavascripts.org.uk[/url]
            
            function zxcSelectSort(zxcid,zxcfirstoption){
             zxcobj=document.getElementById(zxcid);
             zxcAry=new Array();
             for (zxc0=zxcfirstoption;zxc0<zxcobj.options.length;zxc0++){
              zxcAry[zxc0-zxcfirstoption]=zxcobj.options[zxc0];
             }
             zxcAry=zxcAry.sort(zxcOptionSort);
             for (zxc1=0;zxc1<zxcAry.length;zxc1++){
              zxcobj.options[zxc1+zxcfirstoption]=new Option(zxcAry[zxc1].text,zxcAry[zxc1].value,true,true);
             }
             zxcobj.selectedIndex=0;
            }
            
            function zxcOptionSort(zxca,zxcb){
             zxcA=zxca.text.toLowerCase();
             zxcB=zxcb.text.toLowerCase();
             if (zxcA<zxcB){ return -1; }
             if (zxcA>zxcB){ return 1; }
             return 0;
            }
            
            
            </script>
            
            </head>
            <body onload="" >
            <select id="S1" >
            <option value="" >Select</option>
            <option value="" >Tom</option>
            <option value="" >Dick</option>
            <option value="" >Harry</option>
            <option value="" >Albertt</option>
            <option value="" >Bert</option>
            <select>
            <br>
            <input type=button value="Sort Array" onclick="zxcSelectSort('S1',1);" > 
            <br>
            Normally a &lt;BODY> on load event
            
            </body>
            </html>
            Vic

            God Loves You and will never love you less.

            http://www.vicsjavascripts.org/Home.htm

            If my post has been useful please donate to http://www.operationsmile.org.uk/

            Comment


            • #7
              If it can be done on the server-side, then it's better to do there rather than on client-side. Maybe the SQL statement I posted just needed a little tweaking to make it work. Try running it first in SQL Analyzer tool (or equivalent) to easily debug it.
              Glenn
              vBulletin Mods That Rock!

              Comment


              • #8
                Code:
                <script>
                // Sort Array (02-08-2005)
                // by Vic Phillips [url]http://www.vicsjavascripts.org.uk[/url]
                
                function zxcSelectSort(zxcid,zxcfirstoption)
                {
                // zxcid - 'city'
                // zxcfirstoption - '1' 
                
                
                 zxcobj=document.getElementById(zxcid);
                 zxcAry=new Array();
                 for (zxc0=zxcfirstoption;zxc0<zxcobj.options.length;zxc0++)
                 {
                  zxcAry[zxc0-zxcfirstoption]=zxcobj.options[zxc0];
                 }
                 zxcAry=zxcAry.sort(zxcOptionSort);
                 for (zxc1=0;zxc1<zxcAry.length;zxc1++)
                 {
                  zxcobj.options[zxc1+zxcfirstoption]=new Option(zxcAry[zxc1].text,zxcAry[zxc1].value,true,true);
                  
                  document.form.text.value=zxcAry[zxc1].text;
                  document.form.zxcobj.value=zxcobj;
                 }
                }
                
                function zxcOptionSort(zxca,zxcb)
                {
                
                 zxcA=zxca.text.toLowerCase();
                 zxcB=zxcb.text.toLowerCase();
                 document.form.test.value = zxca.text
                 document.form.test2.value = zxcb.text
                 if (zxcA<zxcB)
                 {
                 	return -1;
                 }
                 if (zxcA>zxcB)
                 { 
                 	return 1;
                 }
                 return 0;
                }
                
                
                
                </script>
                
                <body bgcolor="#f5f5f5" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" onload="zxcSelectSort('city',1);">
                <form name="form" id="form" method="post" action="destination4.asp">
                <select name="city" id="city" style="font-size:9px" onChange="form.submit()">
                <option value="empty"> </option>
                <%
                do until rscitycode.eof
                set rsnotrains = con.execute("select DISTINCT Airportcode,CityCode from dbo_tp_airport where Citycode = '"& rscitycode("CityCode") &"' and Facilitycode = 'A'")
                do until rsnotrains.eof 
                
                set rsnozug = con.execute("select DISTINCT CityName from dbo_tp_cityname where CityCode = '" & rsnotrains("CityCode") & "'")
                do until rsnozug.eof
                %>
                <!--<option><%'=rsnotrains("Airportcode")%></option>-->
                <% if rsnozug("CityName") <> temp then %>
                <option><%=rsnozug("CityName")%></option>
                <%
                end if
                temp = rsnozug("CityName")
                rsnozug.movenext
                loop
                rsnotrains.movenext
                loop
                rscitycode.movenext
                loop
                %>
                </select>
                </form>
                I am having a wierd problem with this script.

                When i INCLUDE the line:
                Code:
                document.form.zxcobj.value=zxcobj;
                i get a 'null or not an object' error, but everything is passed to the next page and it works ok.

                But when i take it out i get NO ERROR, but the following page (destination4.asp) doesnt work.

                The 'city' form field is knocked out??
                Zend Certified Engineer | Ayrshire Minis - a Mini E-Community | Ayrshire-Based Web Developer

                Comment


                • #9
                  I would not recomment putting the

                  document.form.test.value = zxca.text
                  document.form.test2.value = zxcb.text

                  in the sort function

                  but trialing this using standard HTML, it records sorted options 0 & 1 in the text boxes

                  What if the reason for these text boxes?

                  trial code
                  Code:
                  <html>
                  <head>
                  <script>
                  // Sort Array (02-08-2005)
                  // by Vic Phillips http://www.vicsjavascripts.org.uk
                  
                  function zxcSelectSort(zxcid,zxcfirstoption){
                   zxcobj=document.getElementById(zxcid);
                   zxcAry=new Array();
                   for (zxc0=zxcfirstoption;zxc0<zxcobj.options.length;zxc0++){
                    zxcAry[zxc0-zxcfirstoption]=zxcobj.options[zxc0];
                   }
                   zxcAry=zxcAry.sort(zxcOptionSort);
                   for (zxc1=0;zxc1<zxcAry.length;zxc1++){
                    zxcobj.options[zxc1+zxcfirstoption]=new Option(zxcAry[zxc1].text,zxcAry[zxc1].value,true,true);
                   }
                   zxcobj.selectedIndex=0;
                  }
                  
                  function zxcOptionSort(zxca,zxcb){
                   zxcA=zxca.text.toLowerCase();
                   zxcB=zxcb.text.toLowerCase();
                   document.form.test.value = zxca.text
                   document.form.test2.value = zxcb.text
                   if (zxcA<zxcB){ return -1; }
                   if (zxcA>zxcB){ return 1; }
                   return 0;
                  }
                  
                  
                  </script>
                  
                  </head>
                  <body onload="" >
                  <select id="S1" >
                  <option value="" >Select</option>
                  <option value="" >Tom</option>
                  <option value="" >Dick</option>
                  <option value="" >Harry</option>
                  <option value="" >Albertt</option>
                  <option value="" >Bert</option>
                  <select>
                  <br>
                  <input type=button value="Sort Array" onclick="zxcSelectSort('S1',1);" >
                  <br>
                  
                  Normally a &lt;BODY> on load event
                  <form name="form" >
                  <input name="test" size=10 >
                  <input name="test2" size=10 >
                  </form>
                  </body>
                  </html>
                  Vic

                  God Loves You and will never love you less.

                  http://www.vicsjavascripts.org/Home.htm

                  If my post has been useful please donate to http://www.operationsmile.org.uk/

                  Comment


                  • #10
                    Originally posted by crmpicco
                    what does the ct represent?
                    I just created an alias to the table so that the SQL will be shorter and easier to read.
                    Code:
                    "select ct.CityCode, ctname.CityName from [COLOR=Red]dbo_tp_city [B]ct[/B][/COLOR], [COLOR=Blue]dbo_tp_cityname [B]ctname[/B][/COLOR] where ct.ProvinceName = '"& state &"' and ctname.CityCode=ct.CityCode order by ctname.CityName asc"
                    Originally posted by crmpicco
                    it seems to just crash my DB???
                    I tried to set up an Access DB locally in my machine with the following information.

                    dbo_tp_city:
                    CityCode (Text/Primary Key)
                    ProvinceName (Text)

                    dbo_tp_cityname:
                    CityCode (Text/Primary Key)
                    CityName (Text)

                    And then I populate them with dummy data and then run the SQL statement in Access' SQL View and it works. It displays the corresponding city names based on the specified province name in alphabetical order and doesn't crash my DB. I also created a sample asp page that accesses the DB and it also works successfully.
                    Code:
                    <%
                    Dim conn, rs, sql, state
                    state = "whatever" 'hardcoded for testing
                    Set conn = Server.CreateObject("ADODB.Connection")
                    conn.open  "Provider=Microsoft.Jet.OLEDB.4.0;User Id=xxx;Password=xxx;Data Source=" & Server.MapPath("city.mdb") & ";"
                    
                    sql = "select ct.CityCode, ctname.CityName from dbo_tp_city ct, dbo_tp_cityname ctname where ct.ProvinceName = '"& state &"' and ctname.CityCode=ct.CityCode order by ctname.CityName asc"
                    set rs = Server.CreateObject("ADODB.Recordset")
                    rs.open sql, conn, 1, 4
                    %>
                    <html>
                    <body>
                    <form>
                    <select>
                    <%
                    while not rs.BOF and not rs.EOF
                    %>
                       <option value="<%=rs.Fields("CityCode").Value%>"><%=rs.Fields("CityName").Value%></option>
                    <%
                      rs.movenext
                    wend
                    rs.Close
                    set rs = nothing
                    conn.Close
                    set conn = nothing
                    %>
                    </select>
                    </form>
                    </body>
                    </html>
                    I don't know why it crashed on yours. Can you post your DB structure and how you implement my suggestion in your code?
                    Glenn
                    vBulletin Mods That Rock!

                    Comment

                    Working...
                    X