All geek questions in one place

JQuery - click change command value

I have a product with some color details. For example: http://accommodationinbrasov.com/detail.asp?id=23# when I click a color for this product, I will like the value of select (frame) to change to that color. can anyone get me on the right track?

thank

+3
source share
3 answers

Perhaps you will probably save the list of colors in an array first.

Then you can bind the change () handler for the selection options, for example:

HTML:

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

If you have an associative array, you can replace the numbers with keys.

Then in JavaScript you can do the following:

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

where colorList is an array of colors.

+1

, , , , .. .

, : /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 .

0

Found

<!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>

0
source

Source: https://habr.com/ru/post/1756881/

More articles:


All Articles