Results 1 to 2 of 2
  1. #1
    Cyberoxy is offline Member
    Join Date
    Jun 2011
    Posts
    5
    Rep Power
    0

    Default how to display images when selected item from the list in JAVA

    Hey guys / gals


    Everything is working expect the list such as Happy Birthday Card etc should display image on another place when selected an item. Look at my java code (red). It is not working.

    Your help much appreciated. Thank you!!!! :-)


    <head>
    <style>
    body {
    margin: 20px;
    }

    select {
    float: left;
    }

    optgroup {
    text-indent: 5px;
    }

    option {
    padding: 0 10px 0 15px;
    }

    table {
    border-spacing: 20px 2px;
    }

    th {
    text-align: left;
    text-decoration: underline;
    }

    td:last-child {
    text-align: right;
    }
    </style>
    <script>
    window.onload = function() {
    document.getElementById("dlist1").onchange = function() {
    var option = this.options[this.selectedIndex];
    document.getElementById("price_card").innerHTML = option.getAttribute("data-card") ? option.getAttribute("data-card") : "";
    document.getElementById("price_memo").innerHTML = option.getAttribute("data-memo") ? option.getAttribute("data-memo") : "";
    document.getElementById("price_tags1").innerHTML = option.getAttribute("data-tags1") ? option.getAttribute("data-tags1") : "";
    document.getElementById("price_tags4").innerHTML = option.getAttribute("data-tags4") ? option.getAttribute("data-tags4") : "";
    document.getElementById("price_key").innerHTML = option.getAttribute("data-key") ? option.getAttribute("data-key") : "";
    document.getElementById("price_fridge").innerHTML = option.getAttribute("data-fridge") ? option.getAttribute("data-fridge") : "";
    }
    }


    </script>

    <script type="text/javascript">
    function swapImage1() {
    var image = document.getElementById("imageToSwap1");
    var dropd = document.getElementById("dlist1");
    image.src = dropd.value;
    };

    </script>


    </head>

    <body>


    <select name="ORDER1" size="12" multiple="multiple" id="dlist1" onchange="swapImage1()">
    <optgroup label="Sow Seeds of Love">
    <option value="None">None</option>
    <option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/photo1.jpg">Happy Birthday Card</option>
    <option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/photo2.jpg">Get well soon Card</option>
    <option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/photo3.jpg">Wedding Card</option>
    <option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/photo4.jpg">New Baby Card</option>
    <option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/photo1.jpg">Thank you Card</option>
    </optgroup>
    </select>

    <table width="700">

    <tr>
    <td>
    <img class="ImageToSwap" id="imageToSwap1" src="Images/Card.jpg" width="147" height="207" />

    </td>
    </tr>
    </table>
    <table>
    <tr>
    <th>Description</th>
    <th>Price</th>
    </tr>
    <tr>
    <td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td>
    <td id="price_card"></td>
    </tr>
    <tr>
    <td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td>
    <td id="price_memo"></td>
    </tr>
    <tr>
    <td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td>
    <td id="price_tags4"></td>
    </tr>
    <tr>
    <td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td>
    <td id="price_tags1"></td>
    </tr>
    <tr>
    <td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td>
    <td id="price_key"></td>
    </tr>
    <tr>
    <td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td>
    <td id="price_fridge"></td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Tolls is offline Moderator
    Join Date
    Apr 2009
    Posts
    11,450
    Rep Power
    19

    Default

    Javascript is not Java.
    This is a Java forum.
    You need a Javascript forum.

Similar Threads

  1. JComboBox-selected item
    By nenadm in forum AWT / Swing
    Replies: 1
    Last Post: 05-27-2011, 12:58 PM
  2. Why wont my JSP page display my selected item?
    By system32 in forum JavaServer Pages (JSP) and JSTL
    Replies: 3
    Last Post: 04-01-2011, 04:02 PM
  3. Replies: 4
    Last Post: 12-11-2010, 05:08 PM
  4. How to get the selected item from combox
    By man4ish in forum AWT / Swing
    Replies: 5
    Last Post: 12-30-2009, 10:29 AM
  5. Replies: 0
    Last Post: 03-25-2008, 12:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •