Ered
Ered

Reputation: 497

Php change background color on different value

So i have this code that creates a SELECT in a FORM, i was wondering how can i make it to add a different background color when $value is different.

Please have in mind that $value is not always the same text and may change.

PHP CODE:

<div class="line"><select style="width: 100%;" name="fields['.base64_encode('Itinerary - Days').']" class="required">
  <option value="">--- Select Deck & Itinerary ---</option>';

foreach($main_title_array as $key => $value):    
$f.= '<option style="background-color:" value="'.$value.'">'.$value.' / '.$type_array[$key].'</option>';
endforeach;

$f.='</select></div>';

RESULT:

 <select class="required" name="fields[SXRpbmVyYXJ5IC0gRGF5cw==]" style="width: 100%;">
      <option value="">--- Select Deck &amp; Itinerary ---</option>
      <option value="Lower Deck" style="background-color:">Lower Deck / Discovery Itin 4D &ndash; 3N</option>
      <option value="Lower Deck" style="background-color:">Lower Deck / Discovery Itin 5D &ndash; 4N</option>
      <option value="Lower Deck" style="background-color:">Lower Deck / Discovery Itin 8D &ndash; 7N</option>
      <option value="Main Deck" style="background-color:">Main Deck / Discovery Itin 4D &ndash; 3N</option>
      <option value="Main Deck" style="background-color:">Main Deck / Discovery Itin 5D &ndash; 4N</option>
      <option value="Main Deck" style="background-color:">Main Deck / Discovery Itin 8D &ndash; 7N</option>
      <option value="Upper Deck" style="background-color:">Upper Deck / Discovery Itin 4D &ndash; 3N</option>
      <option value="Upper Deck" style="background-color:">Upper Deck / Discovery Itin 5D &ndash; 4N</option>
      <option value="Upper Deck" style="background-color:">Upper Deck / Discovery Itin 8D &ndash; 7N</option>
    </select>

WANTED RESULT:

<select class="required" name="fields[SXRpbmVyYXJ5IC0gRGF5cw==]" style="width: 100%;">
  <option value="">--- Select Deck &amp; Itinerary ---</option>
  <option value="Lower Deck" style="background-color:red">Lower Deck / Discovery Itin 4D &ndash; 3N</option>
  <option value="Lower Deck" style="background-color:red"">Lower Deck / Discovery Itin 5D &ndash; 4N</option>
  <option value="Lower Deck" style="background-color:red"">Lower Deck / Discovery Itin 8D &ndash; 7N</option>
  <option value="Main Deck" style="background-color:white">Main Deck / Discovery Itin 4D &ndash; 3N</option>
  <option value="Main Deck" style="background-color:white">Main Deck / Discovery Itin 5D &ndash; 4N</option>
  <option value="Main Deck" style="background-color:white">Main Deck / Discovery Itin 8D &ndash; 7N</option>
  <option value="Upper Deck" style="background-color:black">Upper Deck / Discovery Itin 4D &ndash; 3N</option>
  <option value="Upper Deck" style="background-color:black">Upper Deck / Discovery Itin 5D &ndash; 4N</option>
  <option value="Upper Deck" style="background-color:black">Upper Deck / Discovery Itin 8D &ndash; 7N</option>
</select>

Upvotes: 0

Views: 2268

Answers (4)

Ricardo Barros
Ricardo Barros

Reputation: 205

Try this solution

// List of colors
$colors = array('red', 'white', 'black','blue');

//The lenght of the colors available
$lenght_colors = count($colors);

//store last deck
$last_deck = null;

//Counters
$count = 0;

// Avoid warnings
$f = null;

foreach($main_title_array as $key => $value)
{
    // Switch colors
    if($last_deck != $value)
    {
        // Check if you reached the limit of colors available if yes reset the count
        if($count != $lenght_colors)
        {
            $count++;
        }
        else
        {
            $count = 0;
        }
    }

    $f .= '<option style="background-color:'.$colors[$count].'" value="'.$value.'">'.$value.' / '.$type_array[$key].'</option>';
    $last_deck = $value;
}

Upvotes: 1

Ricardo Barros
Ricardo Barros

Reputation: 205

Try this one

// Decks Color
$decks_color = array('Lower Deck' => 'red', 'Main Deck' => 'white', 'Upper Deck' => 'black');

// Avoid warnings
$f = null;

foreach($main_title_array as $key => $value)
{
    $f .= '<option style="background-color:'.$decks_color[trim($value)].'" value="'.$value.'">'.$value.' / '.$type_array[$key].'</option>';
}

Upvotes: 1

Brandon Kiefer
Brandon Kiefer

Reputation: 349

$f.= "<option style=background-color:".[YOUR VALUE VARIABLE]."
value='".$value."'>".$value
/$type_array[$key]."</option>";

Personally enclosing all non-php with " " instead of ' ' is easier to maintain. Also using ' ' in side of non-php for the HTML to process.

Your code does not produce any value for "background-color". It seems you forgot a variable after "background-color" and instead moved on to the value property.

Upvotes: 0

superUntitled
superUntitled

Reputation: 22527

I have not tested this, but here is the gist...

You need to create an array of colors, then in your loop, check to see if the value has changed. If it has, increase the index, set a the color variable, and keep moving...

<?
$valCheck = "";
$colors = array('red', 'white', '#023');
$count = 0;
$color = $colors[$count];

foreach($main_title_array as $key => $value):    

    if($valCheck != $value){
    $color = $colors[$count];
    $valCheck = $value;
    $count++;
    }
    $f.= '<option style="background-color:'.$color.'" value="'.$value.'">'.$value.' / '.$type_array[$key].'</option>';

endforeach;

Upvotes: 0

Related Questions