SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    array populate drop down menu, can u css format certain array items?

    hi.. im using an array to populate my drop down menu.. here is the script im using


    Code:
    <script type="text/javascript">
      // an array to hold the contents of all lists
      var DataArray = new Array();
    
    
    DataArray[0] = new Array("C1","EC1 - City, Clerkenwell", "p1");
    DataArray[1] = new Array("C1","EC2 - City, Tower", "p2");
    DataArray[2] = new Array("C1","EC3 - City, Bank", "p3");
    DataArray[3] = new Array("C1","EC4 - City, Holborn", "p4");
    
    DataArray[4] = new Array("C1","WC1 - Bloomsbury", "p5");
    DataArray[5] = new Array("C1","WC1 - St Pancras", "p6");
    DataArray[6] = new Array("C1","WC2 - Charing Cross", "p7");
    DataArray[7] = new Array("C1","WC2 - Covent Garden", "p8");
    DataArray[8] = new Array("C1","WC2 - Holborn", "p9");
    DataArray[9] = new Array("C1","WC2 - Leicester Square", "p10");
    
    
      // swap contents of second list
      function switchList(List1)
      { var i, k;
        var List2 = document.getElementById("SecondList");
        var TypeOfValues = List1.options[List1.selectedIndex].value;
    
        //Remove all items in SecondList listbox
        //Start removing items at end and work back to front
        k = List2.options.length - 1;
        for (i = k; i >= 0; i--)
        { List2.options[i] = null;
        }
    
        k = 0;
        for(i = 0; i < DataArray.length; i++)
        { if (DataArray[i][0] == TypeOfValues)
          { List2.options[k] = new Option(DataArray[i][1], DataArray[i][2]);  
            k++;
          }
        }
      }
    </script>
    in a traditional drop down.. if i wanted one of these items to be formated i could just do

    Code:
    <option value="p1" style="blabla">EC1 - Central London</option>
    if i wanted to add css formating to certain items within my array can this be done directly within the script? thanks

  2. #2
    SitePoint Member
    Join Date
    May 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Do it like this

    Firstly, there's no need to have a such declaration for creating an array.

    Your code :

    Code:
      var DataArray = new Array();
      DataArray[0] = new Array("C1","EC1 - City, Clerkenwell", "p1");
    The new one :

    Code:
      var DataArray = [];
      DataArray[0] = ["C1","EC1 - City, Clerkenwell", "p1"];
    Then to add specific style properties directly to the array
    add another dimension and just declare CSS text as you could do with the style attribute ex :

    Code:
    DataArray[0] = ["C1","EC1 - City, Clerkenwell", "p1","font-weight:bold; color:#C3300C"];
    Finally, modify your code to apply the style to the option element

    Code:
        for(i = 0; i < DataArray.length; i++)
        { if (DataArray[i][0] == TypeOfValues)
          { List2.options[k] = new Option(DataArray[i][1], DataArray[i][2]);
            if(typeof(DataArray[i][3])!="undefined") {
              List2.options[k].style.cssText = DataArray[i][3];
            }  
            k++;
          }
        }
    Hope it helps

    Cheers,

    Kris


Bookmarks

Posting Permissions

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