获取一个 PHP 数组并通过 jquery 将其放入 <option> 值中答案

【问题标题】：Take a PHP array and put it into an <option> value via jquery获取一个 PHP 数组并通过 jquery 将其放入 <option> 值中
【发布时间】：2015-09-03 19:00:52
【问题描述】：

我有一个 PHP 服装数组，这是数组。

<?php
   $garments = array( 
        "garment1" => array
            (
                "id"               =>    "GD01_Mens",
                "productName"      =>    "Basic Gildan T-Shirt",
                "front_image"      =>    "garments/product_type_1_front.png",     
                "back_image"       =>    "garments/product_type_1_back.png",           
                "basePrice"        =>     1.05,
                "colour" => array(
                    "white"     =>    "#ffffff",
                    "natural"   =>    "#F3EDC7",
                    "red"       =>    "#EC1111",
                    "purple"    =>    "#7C1E4B",
                    "sangria"   =>    "#C10051",
                    "orange"    =>    "#EA4800",
                    "gold"      =>    "#FBB100",
                    "yellow"    =>    "#F8DD34",
                    "pink"      =>    "#FACDE6",
                    "purple"    =>    "#4F448F",
                    "natural"   =>    "#F3EDC7",
                    "purple"    =>    "#4F448F",
                    "navy"      =>    "#072C57",
                    "royal"     =>    "#1534AE",
                    "tahiti"    =>    "#248AC0",
                    "sky"       =>    "#5AA7FF",
                    "grass"     =>    "#5FAD4A",
                    "kelly"     =>    "#268140",
                    "army"      =>    "#48422A",
                    "charcoal"  =>    "#534F4F",
                    "silver"    =>    "#D6D6D6",
                    "black"     =>    "#282627"
                )     
            ),
        "garment2" => array
            (
                "id" => "GD03_Mens",
                "productName"   =>  "V Neck Gildan T-Shirt",
                "front_image"   =>  "garments/product_type_13_front.png",     
                "back_image"    =>  "garments/product_type_13_back.png",           
                "basePrice"     =>  1.55,
            "colour" => array(
                    "white"     =>    "#ffffff",
                    "natural"   =>    "#F3EDC7",
                    "red"       =>    "#EC1111",
                    "purple"    =>    "#7C1E4B",
                    "sangria"   =>    "#C10051",
                    "orange"    =>    "#EA4800",
                    "gold"      =>    "#FBB100",
                    "yellow"    =>    "#F8DD34",
                    "pink"      =>    "#FACDE6",
                    "purple"    =>    "#4F448F",
                    "natural"   =>    "#F3EDC7",
                    "purple"    =>    "#4F448F",
                    "navy"      =>    "#072C57",
                    "royal"     =>    "#1534AE",
                    "tahiti"    =>    "#248AC0",
                    "sky"       =>    "#5AA7FF",
                    "grass"     =>    "#5FAD4A",
                    "kelly"     =>    "#268140",
                    "army"      =>    "#48422A",
                    "charcoal"  =>    "#534F4F",
                    "silver"    =>    "#D6D6D6",
                    "black"     =>    "#282627"
                )         
            ),
        "garment3" => array
            (
                "id" => "AA01_Mens",
                "productName"   =>  "American Apparel",
                "front_image"   =>  "garments/product_type_49_front.png",     
                "back_image"    =>  "garments/product_type_49_back.png",           
                "basePrice"     =>  1.95,
            "colour" => array(
                    "white"     =>    "#ffffff",
                    "natural"   =>    "#F3EDC7",
                    "red"       =>    "#EC1111",
                    "purple"    =>    "#7C1E4B",
                    "sangria"   =>    "#C10051",
                    "orange"    =>    "#EA4800",
                    "gold"      =>    "#FBB100",
                    "grass"     =>    "#5FAD4A",
                    "kelly"     =>    "#268140",
                    "army"      =>    "#48422A",
                    "charcoal"  =>    "#534F4F",
                    "silver"    =>    "#D6D6D6",
                    "black"     =>    "#282627"
                )       
            ),
            "garment4" => array
            (
               "id" => "BellaCanvas_Mens",
              "productName"   =>    "Bella and Canvas Mens",
              "front_image"   =>    "garments/product_type_13_front.png",     
              "back_image"    =>    "garments/product_type_13_back.png",           
              "basePrice"     =>    1.35,
              "colour" => array(
                    "white"     =>    "#ffffff",
                    "natural"   =>    "#F3EDC7",
                    "red"       =>    "#EC1111",
                    "purple"    =>    "#7C1E4B",
                    "sangria"   =>    "#C10051",
                    "pink"      =>    "#FACDE6",
                    "purple"    =>    "#4F448F",
                    "natural"   =>    "#F3EDC7",
                    "purple"    =>    "#4F448F",
                    "navy"      =>    "#072C57",
                    "royal"     =>    "#1534AE",
                    "tahiti"    =>    "#248AC0",
                    "sky"       =>    "#5AA7FF",
                    "silver"    =>    "#D6D6D6",
                    "black"     =>    "#282627"
                )      
            ),
            "garment5" => array
            (
               "id" => "StanStella_Mens",
              "productName"   =>    "V Neck Stanley Stella",
              "front_image"   =>    "garments/product_type_13_front.png",     
              "back_image"    =>    "garments/product_type_13_back.png",           
              "basePrice"     =>    2.65,
              "colour" => array(
                    "white"     =>    "#ffffff",
                    "natural"   =>    "#F3EDC7",
                    "red"       =>    "#EC1111",
                    "black"     =>    "#282627"
                )         
            ),
            "garment6" => array
            (
               "id" => "FOTL_Mens",
              "productName"   =>    "FOTL Mens T-Shirt",
              "front_image"   =>    "garments/product_type_13_front.png",     
              "back_image"    =>    "garments/product_type_13_back.png",           
              "basePrice"     =>    4.55,
              "colour" => array(
                    "white"     =>    "#ffffff",
                    "natural"   =>    "#F3EDC7",
                    "red"       =>    "#EC1111",
                    "purple"    =>    "#4F448F",
                    "black"     =>    "#282627"
                )         
            ),

       );
 ?>

并且使用标准的 PHP 循环我有这个：

<div class="" id="garmentWindow"> 
        <div id="selectGarment">
            <div id="selectGarment-Innerwrap">
                <?php foreach ($garments as $garment) { ?>
                    <div class="garmentPanel" id="<?php echo $garment['id'];?>">
                        <div class="garmentImgURL"><span id="imgPath" style="display:none;"><?php echo $garment['front_image'];?></span><img src="<?php echo $garment['front_image'];?>"></div>
                        <span id="garmentID" style="display:none;"><?php echo $garment['id'];?></span>
                        <div class="garmentName"><?php echo $garment['productName'];?></div>
                        <div class="garmentPrice">&pound;<span class="basePrice"><?php echo $garment['basePrice'];?></span></div>
                    </div>
                <?php } ?>
            </div>
            <button class="largeBtn" id="useSelected">Use Selected Garment</button>
        </div>
    </div>

我还有一个服装颜色选择器，它与jquery一起改变图像颜色（图像是透明的，它改变了图像下方div的背景颜色）

 <div id="garmentColor">
                         <select name="colorpicker-picker-longlist" id="colorDropdown">
                             <option value="#fff">#fff</option>
                             <option value="#222222">#222222</option>
                             <option value="#ac725e">#ac725e</option>
                             <option value="#d06b64">#d06b64</option>
                             <option value="#f83a22">#f83a22</option>
                             <option value="#fa573c">#fa573c</option>
                             <option value="#ff7537">#ff7537</option>
                             <option value="#ffad46">#ffad46</option>
                             <option value="#42d692">#42d692</option>
                             <option value="#16a765">#16a765</option>
                             <option value="#7bd148">#7bd148</option>
                             <option value="#b3dc6c">#b3dc6c</option>
                             <option value="#fbe983">#fbe983</option>
                             <option value="#fad165">#fad165</option>
                             <option value="#92e1c0">#92e1c0</option>
                             <option value="#9fe1e7">#9fe1e7</option>
                             <option value="#9fc6e7">#9fc6e7</option>
                             <option value="#4986e7">#4986e7</option>
                             <option value="#9a9cff">#9a9cff</option>
                             <option value="#b99aff">#b99aff</option>
                             <option value="#c2c2c2">#c2c2c2</option>
                             <option value="#cabdbf">#cabdbf</option>
                             <option value="#cca6ac">#cca6ac</option>
                             <option value="#f691b2">#f691b2</option>
                             <option value="#cd74e6">#cd74e6</option>
                             <option value="#a47ae2">#a47ae2</option>
                         </select>
                    </div>

这是我的 JS：

    $(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);
                });
});

我想要做的是填充选择该产品时，使用 PHP 数组中的颜色。

我有一个包含所有图片、名称、价格的 div，当我选择它们时，主网站中心图片会发生变化，价格和产品名称等也会发生变化。

然后我有一个单独的服装颜色下拉菜单，但有些服装的颜色与其他服装不同。选择产品时，是否可以使用数组中的颜色填充？

【问题讨论】：

您是否发现我们的解决方案适合您？还是您还需要帮助？

标签： javascript php jquery arrays

【解决方案1】：

您必须使用多个循环。一个简单的例子：

<div class="" id="garmentWindow"> 
    <div id="selectGarment">
        <div id="selectGarment-Innerwrap">
            <?php foreach ($garments as $garment): ?>
                <div class="garmentPanel" id="<?php echo $garment['id'];?>">
                    <div class="garmentImgURL"><span id="imgPath" style="display:none;"><?= $garment['front_image']; ?></span><img src="<?= $garment['front_image']; ?>"></div>
                    <span id="garmentID" style="display:none;"><?= $garment['id']; ?></span>
                    <div class="garmentName"><?= $garment['productName']; ?></div>
                    <div class="garmentPrice">&pound;<span class="basePrice"><?=  $garment['basePrice'];?></span></div>
                    <div class="garmentColor">
                     <select name="colorpicker-picker-longlist" id="colorDropdown">
                    <?php foreach ($garment['colour'] as $colorId => $color): ?>
                        <option value="<?= $color; ?>"><?= $colorId; ?></option>
                    <?php endforeach; ?>
                    </select>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <button class="largeBtn" id="useSelected">Use Selected Garment</button>
    </div>

【讨论】：

【解决方案2】：

HTML 更正
您需要在 foreach 循环中添加以下行，如下所示：

<input type="hidden" class="garmentColor" value='<?php echo json_encode($garment['colour']);?>'>

这是您的 HTML 和 PHP foreach 循环的修改版本：

<div class="" id="garmentWindow">
        <div id="selectGarment">
            <div id="selectGarment-Innerwrap">
                <?php foreach ($garments as $garment) { ?>
                    <div class="garmentPanel" id="<?php echo $garment['id'];?>">
                        <div class="garmentImgURL"><span id="imgPath" style="display:none;"><?php echo $garment['front_image'];?></span><img src="<?php echo $garment['front_image'];?>"></div>
                        <span id="garmentID" style="display:none;"><?php echo $garment['id'];?></span>
                        <div class="garmentName"><?php echo $garment['productName'];?></div>
                        <div class="garmentPrice">&pound;<span class="basePrice"><?php echo $garment['basePrice'];?></span></div>
                        <input type="hidden" class="garmentColor" value='<?php echo json_encode($garment['colour']);?>'>
                    </div>
                <?php } ?>
            </div>
            <button class="largeBtn" id="useSelected">Use Selected Garment</button>
        </div>
</div>

Javascript 更正
我添加了以下代码行以使其工作：

    var colorList = $(this).find('.garmentColor').val();
if(colorList){
  var colorObj   = JSON.parse(colorList);
  var optionHTML = '';
  for(i in colorObj){
    optionHTML += '<option value="' + colorObj[i] + '">' + i + '</option>';
  }
  if(optionHTML){
    $('#colorDropdown').html(optionHTML);
  }
}

这是您的代码和我的更改的集成版本：

$(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);
                    var colorList = $(this).find('.garmentColor').val();
                    if(colorList){
                      var colorObj   = JSON.parse(colorList);
                      var optionHTML = '';
                      for(i in colorObj){
                        optionHTML += '<option value="' + colorObj[i] + '">' + i + '</option>';
                      }
                      if(optionHTML){
                        $('#colorDropdown').html(optionHTML);
                      }
                    }
                });
});

【讨论】：

【解决方案3】：

看起来 Beroza Paul 击败了我，获得了相同的风格解决方案，但仍然有些不同。我将颜色数据存储为 JSON 对象，而他的解决方案将其存储为隐藏输入文本框的值。

JavaScript：

function update_colours(garmentID) {
    var options = [];
    $.each(garment_colors[garmentID], function(key, value) {
        options.push('<option value="'+ key +'">'+ value +'</option>');
    });  
    $('#colorDropdown').html(options.join(''));
}

$(document).ready(function () {
     $(".garmentPanel").click(function (event) {
        var garmentID = $(this).attr('id');
        update_colours(garmentID);
        $('#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);
    });
});

HTML / PHP：

<div class="" id="garmentWindow"> 
    <div id="selectGarment">
        <div id="selectGarment-Innerwrap">
            <script>garment_colors = {};</script>
            <?php foreach ($garments as $garment) { ?>
                <div class="garmentPanel" id="<?php echo $garment['id'];?>">sdds
                    <div class="garmentImgURL"><span id="imgPath" style="display:none;"><?php echo $garment['front_image'];?></span><img src="<?php echo $garment['front_image'];?>"></div>
                    <span id="garmentID" style="display:none;"><?php echo $garment['id'];?></span>
                    <div class="garmentName"><?php echo $garment['productName'];?></div>
                    <div class="garmentPrice">&pound;<span class="basePrice"><?php echo $garment['basePrice'];?></span></div>
                </div>
            <script> garment_colors['<?php echo $garment['id'];?>'] = <?echo json_encode($garment['colour']);?> </script>
            <?php } ?>
        </div>
        <button class="largeBtn" id="useSelected">Use Selected Garment</button>
    </div>
</div>

【讨论】：