Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamic drop-down menu

    I am wondering how to create a dynamic drop down menu like what u would see on a computer website where the item u select changes the price and the current configuration of the computer. im pretty sure u would use javascript for this. ive looked at many tutorials but none of them show this. how would i do this?

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well depending what you need would really depend how it should be done. Here is a simple easy way in case what you need it for is simple and easy. :)

    Code:
    <html>
      <head>
        <title>Dynamic Test</title>
        <script type="text/javascript">
          function doIt(o) {
            var s = "";
    
            if (o.value != "0") {
              s += o.text + " - ";
              s += o.getAttribute("desc") + " - ";
              s += o.getAttribute("cost");
            }
            document.getElementById("adiv").innerHTML = s;
          }
        </script>
      </head>
      <body>
        <div>
          <select id="s" onchange="doIt(this.options[this.selectedIndex]);">
            <option value="0">Select Computer</option>
            <option value="100" desc="3GHz Intel DuoCore, 1TB HD, 8 GB RAM" cost="$3,995.00">Mach 3 Computer</option>
            <option value="101" desc="2.7GHz Intel DuoCore, 500MB HD, 4 GB RAM" cost="$2,995.00">Mach 3 Computer</option>
            <option value="102" desc="2.4GHz Intel DuoCore, 100MB HD, 2 GB RAM" cost="$1,995.00">Mach 3 Computer</option>
          </select>
          <br />
          <div id="adiv"> </div>
        </div>
      </body>
    </html>
    Is anyone aware of HTML or XHTML rules that prohibit custom attributes like this?

    david_kw

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks that is good but i am also wondering how u can have like a computer that has a set price and then change a component and then it alters the price and the specs.

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok how about this

    Code:
    <html>
      <head>
        <title>Dynamic Test</title>
        <script type="text/javascript">
          function doIt() {
            var o = document.f.s.options[document.f.s.selectedIndex];
            var o2 = document.f.t.options[document.f.t.selectedIndex];
            var s = "";
            var s2 = "";
            var total = 0;
    
            if (o.value != "0") {
              s += o.text + " - ";
              s += o.getAttribute("desc");
              total += parseInt(o.getAttribute("cost"));
            }
            if (o2.value != "0") {
              total += parseInt(o2.value);
              s2 += "with " + o2.text;
            }
            s2 += " - Total $" + total; 
            document.getElementById("adiv").innerHTML = s;
            document.getElementById("bdiv").innerHTML = s2;
          }
        </script>
      </head>
      <body>
        <div>
          <form name="f" action="#" onsubmit="return(false);">
            <select id="s" onchange="doIt();">
              <option value="0">Select Computer</option>
              <option value="100" desc="3GHz Intel DuoCore, 1TB HD, 8 GB RAM" cost="3995">Mach 3 Computer</option>
              <option value="101" desc="2.7GHz Intel DuoCore, 500MB HD, 4 GB RAM" cost="2995">Mach 2 Computer</option>
              <option value="102" desc="2.4GHz Intel DuoCore, 100MB HD, 2 GB RAM" cost="1995">Mach 1 Computer</option>
            </select>
            <select id="t" onchange="doIt();">
              <option value="0">Select Option</option>
              <option value="49">$49 - Mem Stick</option>
              <option value="79">$79 - Printer</option>
              <option value="99">$99 - Monitor Upgrade</option>
            </select>
          </form?
          <br />
          <div id="adiv"> </div>
          <br />
          <div id="bdiv"> </div>
        </div>
      </body>
    </html>
    There should be enough there to figure some stuff out on your own.

    Good luck.

    david_kw

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok so now that i have that code how could i get that stuff to be displayed where i want it to be in my site. instead of it just showing up right below the menus

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look at the code. There are <div>s named 'adiv' and 'bdiv' which you can place anywhere in your page.

    david_kw


  •  

    Posting Permissions

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