www.webdeveloper.com
Results 1 to 5 of 5

Thread: changing text dynamically when selecting an option from a dropdown menu

  1. #1
    Join Date
    Jun 2014
    Posts
    6

    changing text dynamically when selecting an option from a dropdown menu

    Hello,

    I am working on a products display website and i want the value of the price to change dynamically for every item in the dropdown menu. For example, if i select a product from the dropdown menu, its price shows up. If i select another one, then the previous price changes to the price of the newly selected product. I'm not really sure how to do this. Any suggestions?

    Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Should be easy to do with the appropriate information provided.
    However this is a forum, not a programming service.
    If you don't know JS, as least provide the HTML outline of what you
    want the display to look like along with some (brief) items and prices.

    Make some sort of coding attempt.

  3. #3
    Join Date
    Jun 2014
    Posts
    6
    So Sorry. Didnt know that. Anyways, here's a piece of the html code:

    Code:
    <body>
    
    
    <div>
    <h4 >Select Option:</h4>
    <form >
    <select name="products">
    <option value="item1">Samsung Galaxy S5</option>
    <option value="item2">Samsung Galaxy S4</option>
    <option value="item3">Samsung Galaxy S3</option>
    <option value="item4">Samsung Galaxy S2</option>
    </select>
    </form>
    </div>
    
    
    <div>
    <h4>Price:</h4>
    </div>
    
    </body>

    Since i have no idea how to show the price of the selected item, i have left that part.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    Will this work for you?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <form id="myForm" action="" method="post">
    
    <div>
    <h4 >Samsung Option: 
     <select id="products" onchange="document.getElementById('price').innerHTML='$'+this.value">
      <option value=""> Select </option>
      <option value="400"> Galaxy S5 </option>
      <option value="300"> Galaxy S4 </option>
      <option value="200"> Galaxy S3 </option>
      <option value="100"> Galaxy S2 </option>
     </select>
    </h4>
    </div>
    
    <div>
    <h4 id="price">Price: $</h4>
    </div>
    
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Jun 2014
    Posts
    6
    This should work, i think. i'll check it out. thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles