Image Not Updating

Status
Not open for further replies.
JayC

JayC

Well-Known Member
Aug 8, 2013
5,505
1,401
Code: 
<script type="text/javascript">
$('#choose').change(function(){
    var image = $("#choose option:selected").data('image');
    $('#selected').attr("src", image);
});
</script>
<select id="choose">
  <option selected="selected">Choose Image</option>
  <option data-image="http://aeon-hotel.net/r63/c_images/groups/POKE1.gif"> Image One </option>
  <option data-image="http://aeon-hotel.net/r63/c_images/groups/ES079.gif"> Image Two </option>
  <option data-image="http://aeon-hotel.net/r63/c_images/groups/ES078.gif"> Image Three </option>
</select>
<img id="selected" src="//placehold.it/50x50/aaaaaa" />

When I select a image it doesn't automatically update...
6G6UBXW.png


Tag the smart guy @Sysode 
Also if you wouldn't mind helping me with php too..
The option-data has to be a link <option data-image="/r63/c_images/groups/POKE1.gif">
but what goes in my database is just the "POKE1" and I need to know how to truncate "/r63/c_images/groups/" because thats always the same and ".gif" thats also always the same 
@Markshall lol that previous thread was all because i forgot <script text/javascript> </script> lmao. This is the real help needed
 
Sort by date Sort by votes
TesoMayn

TesoMayn

Boredom, it vexes me.
Oct 30, 2011
1,484
1,485
Code: 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <script type='text/javascript'>
      $(window).load(function(){
        $('#choose').change(function(){
          var image = $("#choose option:selected").data('image');
          $('#selected').attr("src", image);
        });
      });
    </script>
  </head>
  <body>
    <select id="choose">
      <option selected="selected">Choose Image</option>
      <option data-image="http://aeon-hotel.net/r63/c_images/groups/POKE1.gif"> Image One </option>
      <option data-image="http://aeon-hotel.net/r63/c_images/groups/ES079.gif"> Image Two </option>
      <option data-image="http://aeon-hotel.net/r63/c_images/groups/ES078.gif"> Image Three </option>
    </select>
    <img id="selected" src="http://placehold.it/50x50/aaaaaa" />
  </body>
</html>
 
Upvote 0 Downvote
JayC

JayC

Well-Known Member
Aug 8, 2013
5,505
1,401
TheCheater said:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <script type='text/javascript'>
      $(window).load(function(){
        $('#choose').change(function(){
          var image = $("#choose option:selected").data('image');
          $('#selected').attr("src", image);
        });
      });
    </script>
  </head>
  <body>
    <select id="choose">
      <option selected="selected">Choose Image</option>
      <option data-image="http://aeon-hotel.net/r63/c_images/groups/POKE1.gif"> Image One </option>
      <option data-image="http://aeon-hotel.net/r63/c_images/groups/ES079.gif"> Image Two </option>
      <option data-image="http://aeon-hotel.net/r63/c_images/groups/ES078.gif"> Image Three </option>
    </select>
    <img id="selected" src="http://placehold.it/50x50/aaaaaa" />
  </body>
</html>
Click to expand...
You're the best<3 Thank you so much
 
Upvote 0 Downvote
Status
Not open for further replies.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top