Question

我的产品有一些颜色细节。例如：http://accommodationinbrasov.com/detail.asp?id=23# 当我点击该产品的颜色时，我会将select（frame）的值更改为该颜色。任何人都可以让我走上正确的道路？

谢谢

Answer 1

您可以先在阵列中存储颜色列表。

然后，您可以为select选项绑定change（）处理程序，如下所示：

HTML：

<select id="products">
  <option value="0">Blue</option>
  <option value="1">Black</option>
  <option value="2">Red</option>
</select>

如果你有一个关联数组，那么你可以用键替换数字。

然后在JavaScript中，你可以这样做：

$('#products').change(function() {
  $("option:selected", $(this)).each(function() {
     var index = $(this).val();
     $(this).css('backgroundColor', colorList[index]);
  });
})

其中colorList是颜色数组。

Answer 2

基本上你需要将该帧的所有颜色变化，即棕色，红色，白色等图像作为图像。

例如，您的图片可以命名为： /images/frame_1_brown.jpg /images/frame_1_red.jpg /images/frame_1_white.jpg

在选择中你有这样的东西：

<select name="color">
   <option value="/images/frame_1_brown.jpg" selected="selected">Brown</option>
   <option value="/images/frame_1_red.jpg">Red</option>
   <option value="/images/frame_1_white.jpg">White</option>
</select>

您有一个图像标记，如：

<img src="/images/frame_1_brown.jpg" alt="Glasses" id="product-image"/>

然后javascript将如下所示：

$('select[name=color]').change(function(){
   $('#product-image').attr('src', $(this).val());
})

假设您当然使用jQuery。

基本上，当您更改下拉列表的选择时，这将更改图像的src属性。

Answer 3

找到它

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body{
            font-size: 12px;
        }
        a, a:link,a:hover, a:active, a:visited{
            text-decoration: none;

            color:#000;
        }
        a:hover{
            text-transform: capitalize;
        }
        div{
            padding-right: 10px;
        }
    </style>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>
    <div style="float:left;">
        <a id="one" href="#" class="clickable"><img src="" alt="one" border="0" /></a>
    </div>
    <div style="float:left;">
        <a id="two" href="#" class="clickable"><img src="" alt="two" border="0" /></a>
    </div>
    <div style="float:left;">
        <a id="three" href="#" class="clickable"><img src="" alt="three" border="" /></a>
    </div>
    <div style="clear:left;"></div>
    <div>
        <select id="dropdown">
            <option value="one">one</option>
            <option value="two">two</option>
            <option value="three">three</option>
        </select>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
           $('.clickable').click(function(){
               val = $(this).attr("id");
               $("#dropdown").val(val);
           });
        });
    </script>

Jquery on click更改组合值

3 个答案: