title: Take a PHP array and put it into an <option> value via jquery
body: <p>I have a PHP array of garments, here is the array.</p>
  
  <pre><code>&lt;?php
     $garments = array( 
          "garment1" =&gt; array
              (
                  "id"               =&gt;    "GD01_Mens",
                  "productName"      =&gt;    "Basic Gildan T-Shirt",
                  "front_image"      =&gt;    "garments/product_type_1_front.png",     
                  "back_image"       =&gt;    "garments/product_type_1_back.png",           
                  "basePrice"        =&gt;     1.05,
                  "colour" =&gt; array(
                      "white"     =&gt;    "#ffffff",
                      "natural"   =&gt;    "#F3EDC7",
                      "red"       =&gt;    "#EC1111",
                      "purple"    =&gt;    "#7C1E4B",
                      "sangria"   =&gt;    "#C10051",
                      "orange"    =&gt;    "#EA4800",
                      "gold"      =&gt;    "#FBB100",
                      "yellow"    =&gt;    "#F8DD34",
                      "pink"      =&gt;    "#FACDE6",
                      "purple"    =&gt;    "#4F448F",
                      "natural"   =&gt;    "#F3EDC7",
                      "purple"    =&gt;    "#4F448F",
                      "navy"      =&gt;    "#072C57",
                      "royal"     =&gt;    "#1534AE",
                      "tahiti"    =&gt;    "#248AC0",
                      "sky"       =&gt;    "#5AA7FF",
                      "grass"     =&gt;    "#5FAD4A",
                      "kelly"     =&gt;    "#268140",
                      "army"      =&gt;    "#48422A",
                      "charcoal"  =&gt;    "#534F4F",
                      "silver"    =&gt;    "#D6D6D6",
                      "black"     =&gt;    "#282627"
                  )     
              ),
          "garment2" =&gt; array
              (
                  "id" =&gt; "GD03_Mens",
                  "productName"   =&gt;  "V Neck Gildan T-Shirt",
                  "front_image"   =&gt;  "garments/product_type_13_front.png",     
                  "back_image"    =&gt;  "garments/product_type_13_back.png",           
                  "basePrice"     =&gt;  1.55,
              "colour" =&gt; array(
                      "white"     =&gt;    "#ffffff",
                      "natural"   =&gt;    "#F3EDC7",
                      "red"       =&gt;    "#EC1111",
                      "purple"    =&gt;    "#7C1E4B",
                      "sangria"   =&gt;    "#C10051",
                      "orange"    =&gt;    "#EA4800",
                      "gold"      =&gt;    "#FBB100",
                      "yellow"    =&gt;    "#F8DD34",
                      "pink"      =&gt;    "#FACDE6",
                      "purple"    =&gt;    "#4F448F",
                      "natural"   =&gt;    "#F3EDC7",
                      "purple"    =&gt;    "#4F448F",
                      "navy"      =&gt;    "#072C57",
                      "royal"     =&gt;    "#1534AE",
                      "tahiti"    =&gt;    "#248AC0",
                      "sky"       =&gt;    "#5AA7FF",
                      "grass"     =&gt;    "#5FAD4A",
                      "kelly"     =&gt;    "#268140",
                      "army"      =&gt;    "#48422A",
                      "charcoal"  =&gt;    "#534F4F",
                      "silver"    =&gt;    "#D6D6D6",
                      "black"     =&gt;    "#282627"
                  )         
              ),
          "garment3" =&gt; array
              (
                  "id" =&gt; "AA01_Mens",
                  "productName"   =&gt;  "American Apparel",
                  "front_image"   =&gt;  "garments/product_type_49_front.png",     
                  "back_image"    =&gt;  "garments/product_type_49_back.png",           
                  "basePrice"     =&gt;  1.95,
              "colour" =&gt; array(
                      "white"     =&gt;    "#ffffff",
                      "natural"   =&gt;    "#F3EDC7",
                      "red"       =&gt;    "#EC1111",
                      "purple"    =&gt;    "#7C1E4B",
                      "sangria"   =&gt;    "#C10051",
                      "orange"    =&gt;    "#EA4800",
                      "gold"      =&gt;    "#FBB100",
                      "grass"     =&gt;    "#5FAD4A",
                      "kelly"     =&gt;    "#268140",
                      "army"      =&gt;    "#48422A",
                      "charcoal"  =&gt;    "#534F4F",
                      "silver"    =&gt;    "#D6D6D6",
                      "black"     =&gt;    "#282627"
                  )       
              ),
              "garment4" =&gt; array
              (
                 "id" =&gt; "BellaCanvas_Mens",
                "productName"   =&gt;    "Bella and Canvas Mens",
                "front_image"   =&gt;    "garments/product_type_13_front.png",     
                "back_image"    =&gt;    "garments/product_type_13_back.png",           
                "basePrice"     =&gt;    1.35,
                "colour" =&gt; array(
                      "white"     =&gt;    "#ffffff",
                      "natural"   =&gt;    "#F3EDC7",
                      "red"       =&gt;    "#EC1111",
                      "purple"    =&gt;    "#7C1E4B",
                      "sangria"   =&gt;    "#C10051",
                      "pink"      =&gt;    "#FACDE6",
                      "purple"    =&gt;    "#4F448F",
                      "natural"   =&gt;    "#F3EDC7",
                      "purple"    =&gt;    "#4F448F",
                      "navy"      =&gt;    "#072C57",
                      "royal"     =&gt;    "#1534AE",
                      "tahiti"    =&gt;    "#248AC0",
                      "sky"       =&gt;    "#5AA7FF",
                      "silver"    =&gt;    "#D6D6D6",
                      "black"     =&gt;    "#282627"
                  )      
              ),
              "garment5" =&gt; array
              (
                 "id" =&gt; "StanStella_Mens",
                "productName"   =&gt;    "V Neck Stanley Stella",
                "front_image"   =&gt;    "garments/product_type_13_front.png",     
                "back_image"    =&gt;    "garments/product_type_13_back.png",           
                "basePrice"     =&gt;    2.65,
                "colour" =&gt; array(
                      "white"     =&gt;    "#ffffff",
                      "natural"   =&gt;    "#F3EDC7",
                      "red"       =&gt;    "#EC1111",
                      "black"     =&gt;    "#282627"
                  )         
              ),
              "garment6" =&gt; array
              (
                 "id" =&gt; "FOTL_Mens",
                "productName"   =&gt;    "FOTL Mens T-Shirt",
                "front_image"   =&gt;    "garments/product_type_13_front.png",     
                "back_image"    =&gt;    "garments/product_type_13_back.png",           
                "basePrice"     =&gt;    4.55,
                "colour" =&gt; array(
                      "white"     =&gt;    "#ffffff",
                      "natural"   =&gt;    "#F3EDC7",
                      "red"       =&gt;    "#EC1111",
                      "purple"    =&gt;    "#4F448F",
                      "black"     =&gt;    "#282627"
                  )         
              ),
  
         );
   ?&gt;
  </code></pre>
  
  <p>and Using a standard PHP loop i have this:</p>
  
  <pre><code>&lt;div class="" id="garmentWindow"&gt; 
          &lt;div id="selectGarment"&gt;
              &lt;div id="selectGarment-Innerwrap"&gt;
                  &lt;?php foreach ($garments as $garment) { ?&gt;
                      &lt;div class="garmentPanel" id="&lt;?php echo $garment['id'];?&gt;"&gt;
                          &lt;div class="garmentImgURL"&gt;&lt;span id="imgPath" style="display:none;"&gt;&lt;?php echo $garment['front_image'];?&gt;&lt;/span&gt;&lt;img src="&lt;?php echo $garment['front_image'];?&gt;"&gt;&lt;/div&gt;
                          &lt;span id="garmentID" style="display:none;"&gt;&lt;?php echo $garment['id'];?&gt;&lt;/span&gt;
                          &lt;div class="garmentName"&gt;&lt;?php echo $garment['productName'];?&gt;&lt;/div&gt;
                          &lt;div class="garmentPrice"&gt;&amp;pound;&lt;span class="basePrice"&gt;&lt;?php echo $garment['basePrice'];?&gt;&lt;/span&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;?php } ?&gt;
              &lt;/div&gt;
              &lt;button class="largeBtn" id="useSelected"&gt;Use Selected Garment&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I also have a garment colour selector, which works with jquery to change the image colour (the image is transparent and it changes the background colour of the div underneath the image)</p>
  
  <pre><code> &lt;div id="garmentColor"&gt;
                           &lt;select name="colorpicker-picker-longlist" id="colorDropdown"&gt;
                               &lt;option value="#fff"&gt;#fff&lt;/option&gt;
                               &lt;option value="#222222"&gt;#222222&lt;/option&gt;
                               &lt;option value="#ac725e"&gt;#ac725e&lt;/option&gt;
                               &lt;option value="#d06b64"&gt;#d06b64&lt;/option&gt;
                               &lt;option value="#f83a22"&gt;#f83a22&lt;/option&gt;
                               &lt;option value="#fa573c"&gt;#fa573c&lt;/option&gt;
                               &lt;option value="#ff7537"&gt;#ff7537&lt;/option&gt;
                               &lt;option value="#ffad46"&gt;#ffad46&lt;/option&gt;
                               &lt;option value="#42d692"&gt;#42d692&lt;/option&gt;
                               &lt;option value="#16a765"&gt;#16a765&lt;/option&gt;
                               &lt;option value="#7bd148"&gt;#7bd148&lt;/option&gt;
                               &lt;option value="#b3dc6c"&gt;#b3dc6c&lt;/option&gt;
                               &lt;option value="#fbe983"&gt;#fbe983&lt;/option&gt;
                               &lt;option value="#fad165"&gt;#fad165&lt;/option&gt;
                               &lt;option value="#92e1c0"&gt;#92e1c0&lt;/option&gt;
                               &lt;option value="#9fe1e7"&gt;#9fe1e7&lt;/option&gt;
                               &lt;option value="#9fc6e7"&gt;#9fc6e7&lt;/option&gt;
                               &lt;option value="#4986e7"&gt;#4986e7&lt;/option&gt;
                               &lt;option value="#9a9cff"&gt;#9a9cff&lt;/option&gt;
                               &lt;option value="#b99aff"&gt;#b99aff&lt;/option&gt;
                               &lt;option value="#c2c2c2"&gt;#c2c2c2&lt;/option&gt;
                               &lt;option value="#cabdbf"&gt;#cabdbf&lt;/option&gt;
                               &lt;option value="#cca6ac"&gt;#cca6ac&lt;/option&gt;
                               &lt;option value="#f691b2"&gt;#f691b2&lt;/option&gt;
                               &lt;option value="#cd74e6"&gt;#cd74e6&lt;/option&gt;
                               &lt;option value="#a47ae2"&gt;#a47ae2&lt;/option&gt;
                           &lt;/select&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JS:</p>
  
  <pre><code>    $(document).ready(function () {
                  $(".garmentPanel").click(function (event) {
                      $('#src_garmentBasePrice').text($(this).find('.basePrice').text());
                      $("#src_garmentID").text($(this).find('#garmentID').text());
                      $("#src_garmentName").text($(this).find('.garmentName').text());
                      $("#src_garmentImgUrl").text($(this).find('#imgPath').html());
                      var imgSrc = document.getElementById("src_garmentImgUrl").innerHTML ;
                      $("#garment_img").attr("src",imgSrc);
                  });
  });
  </code></pre>
  
  <p>What im trying to do is to populate the 
  with the Colours from the PHP array, when that product is selected.</p>
  
  <p>I have a div with all the images, name, prices in, and when i select them, the main website central image changes, so does the price, and product name ect..</p>
  
  <p>Then i have a separate drop down for the garment colors, but some garments have different colors than others. Is it possible to populate the  with the colors from the array, when a product is selected?</p>