将动态变量传递给Javascript函数?

时间:2011-10-25 19:27:11

标签: php javascript variables selectedindex

<?php if ($option['type'] == 'select') { ?>
            <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
              <?php if ($option['required']) { ?>
              <span class="required">*</span>
              <?php } ?>
              <b><?php echo $option['name']; ?>:</b><br />
              <select name="option[<?php echo $option['product_option_id']; ?>]">
                <!-- <option value=""><?php echo $text_select; ?></option> -->
                <?php foreach ($option['option_value'] as $option_value) { ?>
                <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                <?php if ($option_value['price']) { ?>
                (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                <?php } ?>
                </option>
                <?php } ?>
              </select>
              <?php if ($option_value['image'] != 'image/' && $option_value['image'] != 'image/no_image.jpg' ) { ?><?php 
    list($simgwidth) = getimagesize($option_value['image']);
    $selectimgpos = $simgwidth + 35; 
    ?>
<center>
<span id="img<?php echo $option['product_option_id']; ?>" style="position: absolute; display: none; left: -<?php echo $selectimgpos; ?>px; background: #eee; padding: 10px; border: 1px dotted #666; z-index: 90;">
<img src="<?php echo $option_value['image']; ?>">
<br /><strong><?php echo $option['name']; ?></strong>
</span></center><?php } ?>
            </div>
            <br />
<?php } ?>

嗨,我是编程新手,我需要上面代码的帮助。通常,此代码仅显示带有选项的“选择”下拉框。

我通过在跨度内部底部添加额外图像来修改它。我还计算了宽度并根据其宽度重新定位了图像。

我接下来要做的是有一个javascript,如果用户在选择框上悬停或onFocus将显示跨度内的图像。如果他们更改了选择框,图像将根据他们选择的内容而改变。我正在考虑让布尔隐藏这张照片。

我发现了一些javascripts,但我需要从php传递动态变量。

我发现了这个javascript,但代码不允许我传递变量。

         <script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src ="images/"+dropd.value+".jpg";    
};
</script>

由于php生成的ID不断变化,我无法使用静态变量。

任何帮助将不胜感激。谢谢大家。

PS:$ option_value ['image']是一个php数组。如何显示此数组中的第一个或最后一个元素?通常它就像array_ [n],但这个已经有括号? $ option_value ['image [0]'] ??

1 个答案:

答案 0 :(得分:1)

要将php变量传递给javascript,您只需要在正确的位置回显它们:

// in your php file
<?php
    $image_to_swap = "my_id_of_image_to_swap";
    $element = "my_id_of_element";
?>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("<?php echo $image_to_swap; ?>");
    var dropd = document.getElementById("<?php echo $element; ?>");
    image.src ="images/"+dropd.value+".jpg";    
};
</script>

至于你的PS:

PHP数组可以是多维的,因此对于以下数组:

$image = array(
    0 => array(
             0 => 'apple',
             1 => 'banana'
         ),
    1 => array(
             0 => 'broccoli',
             1 => 'cauliflower'
         ),
    2 => array(
             0 => 'peanut',
             1 => 'walnut'
         )
);

您可以访问以下项目:

echo $image[0][0]; // outputs apple
echo $image[2][1]; // outputs walnut

您可以使用字符串作为键,因此您也可以为键命名并使用字符串访问它们:

$image = array(
    'fruits' => array(
             0 => 'apple',
             1 => 'banana'
         ),
    'vegetables' => array(
             0 => 'broccoli',
             1 => 'cauliflower'
         ),
    'nuts' => array(
             0 => 'peanut',
             1 => 'walnut'
         )
);

您可以访问以下项目:

echo $image['fruits'][0]; // outputs apple
echo $image['nuts'][1]; // outputs walnut