array populate drop down, css format

[vasox56]

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

<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

<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

 

[monksnake]

Yes it can be done directly within a script. The better idea is to assign classnames to the <options> instead of an inline style.

Then you can use javascript to change the classname.

Assuming you know what a CSS class is, the javascript to assign/change a class is like this (I'll use a snippet of your code):

    for(i = 0; i < DataArray.length; i++)
    { if (DataArray[i][0] == TypeOfValues)
      { List2.options[k] = new Option(DataArray[i][1], DataArray[i][2]);  
        [!]List2.options[k].className = "differentBackground";[/!] 
        k++;
      }
    }

Where class differentBackground looks like this:

.differentBackground {
   background-color:#ff0000;
}

<.

 

[vasox56]

ok.. so if i want to add the css class to one of my array items.. eg this

DataArray[4] = new Array("C1","WC1 - Bloomsbury", "p5");

can i do it like this?

DataArray[4] = new Array("C1","WC1 - Bloomsbury", "p5");
DataArray[4].className = "differentBackground";

because where you have placed that line above seems like it is formating a group of things.. rather then a specific one

 

[monksnake]

No, class names can only be added to HTML objects, which in your case was an array of <option> tags.

<.

 

[vasox56]

so are you telling me that the array is just a table of data.. and thats it

am i not able to format specific postcodes within that array...

so that record in the array displays in a customized way in my drop down

this will be very bad if i cant do it.

 

[monksnake]

so are you telling me that the array is just a table of data.. and thats it

That's all an array ever is.

<.

 

[vasox56]

oh no.. what am i supposed to do now then..

i want to format the way the drop down displays the items in the array.. add margins.. titles.. colours.. underlines..

if i cant do this i might have to scrap the array altogether.. this is terrible news.. help me!

can you suggest anything?

 

[monksnake]

Do you see my original response?

You CAN apply styles to the HTMl objects that the array information goes into.

You are pulling that array information into a dropdown.

You can style the dropdown BASED on the current value within the array at the time if you loop through the array.

Here is an example of that:

    for(i = 0; i < DataArray.length; i++)
    { if (DataArray[i][0] == TypeOfValues)
      { List2.options[k] = new Option(DataArray[i][1], DataArray[i][2]);  
        [!]if (DataArray[i][1] == "WC1 - Bloomsbury") { 
           List2.options[k].className = "differentBackground";
        }[/!]   
        k++;
      }
    }

That code will change the background color of an option IF and ONLY IF DataArray[1] = "WC1 - Bloomsbury".

Take the time to try to understand the code.

<.

 

[vasox56]

i seeee.. let me give it a go..

 

[vasox56]

yeah.. i think i just have a bit of a problem with the }

im trying this and it isnt working.. what is wrong here..

and also to save time.. if you could in red show me how i can set a rule for another object.. just so i know when to start and end the {}

<script type="text/javascript">

.difmarg {
   margin-left:5px;
}


  // 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]);  
        if (DataArray[i][1] == "WC1 - Bloomsbury") {
           List2.options[k].className = "difmarg";
        }   
        k++;
      }
    }
</script>

 

[monksnake]

Is what you are doing for a home project or work?


<.

 

[vasox56]

lol.. ill show you the page..

its my business.. i made the website.. our database.. promoting it.. running it.. etc

http://www.londonheathrowcars.com/newpage/index.htm

 

[monksnake]

Ok, this code:

.difmarg {
   margin-left:5px;
}

Is CSS, it's entirely in the wrong section.

It goes in between <style> tags within the <head>.

<style type="text/css">
.difmarg {
   margin-left:5px;
}
</style>

<.

 

[vasox56]

yeah thought so.. i was gonna say.. do i put the css code in my original style sheet..

i thought you could embed some css within the javascript.. ok let me try it and see if it works...

do you like my site?

 

[vasox56]

ive definately ruined the script.. the actual drop down doesnt work now.. here it is.. ive put the css class in my stylesheet..

can you just spot the extra } or the mistake in this please..

<script type="text/javascript">




  // an array to hold the contents of all lists
  var DataArray = new Array();


***** my array items..




  // 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]);  
        if (DataArray[i][1] == "WC1 - Bloomsbury") {
           List2.options[k].className = "difmarg";
        }   
        k++;
      }
    }
</script>

 

[monksnake]

Yeah the finished pages have a nice layout to them.

<.

 

[vasox56]

ok. i was missing a } at the bottom of the script.. so basically right now i have this..

<script type="text/javascript">




  // an array to hold the contents of all lists
  var DataArray = new Array();


***** my array items..




  // 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]);  
        if (DataArray[i][1] == "WC1 - Bloomsbury") {
           List2.options[k].className = "difmarg";
        }   
        k++;
      }
    }
}
</script>

the menu is loading the postcodes correctly but the WC1 postcode doesnt have a margin..

i have this code in my stylesheet (external)

.difmarg {
   margin-left:5px;
}

why isnt it working?

 

[monksnake]

You can't assign a margin to an <option> tag.

The only way to do that is a dirty method by adding &nbsp;'s in front of the value.


<.

 

[vasox56]

yeah i got it working.. thank you