SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Javascript with HTML <select> tag

    Hello Friends,

    I was wondering if one can use Javascript to choose from a list of prices displayed in a combo using the <select> tag based on a previous item choosen. For example:

    if type = Soft then
    <SELECT NAME=amount>
    <OPTION>1000
    <OPTION>500
    elseif type Hard then
    <OPTION>1500
    <OPTION>800
    else
    <OPTION>100
    <OPTION>150

    etc.

    Any suggestions would be greatly appreciated.

    Best regards.

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep... that's very possible indeed:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function changeTypeAmounts(oTypeObj,sAmountsObj) {
    var oAmountsObj = document.getElementById(sAmountsObj);
    if (oTypeObj && sAmountsObj) {
    clearOptions(sAmountsObj);
    var oOpt;
    switch (oTypeObj.value) {
    case "Soft": {
    	oOpt = new Option("1000","1000"); oAmountsObj.options.add(oOpt);
    	oOpt = new Option("500","500"); oAmountsObj.options.add(oOpt);
    } 
    case "Hard": {
    	oOpt = new Option("1500","1500"); oAmountsObj.options.add(oOpt);
    	oOpt = new Option("800","800"); oAmountsObj.options.add(oOpt);
    } 
    default: {
    	oOpt = new Option("100","100"); oAmountsObj.options.add(oOpt);
    	oOpt = new Option("150","150"); oAmountsObj.options.add(oOpt);
    } 
    }
    }
    }
    function clearOptions(sSelectObj) {
    var oSelect = document.getElementById(sSelectObj);
    for (i = oSelect.options.length; i >= 0; i--) {
    oSelect.options[i] = null;
    }
    }
    function loader() {
    changeTypeAmounts(document.getElementById('elmType'),'elmAmounts');
    }
    window.onload = loader;
    </SCRIPT>
    Code:
    <SELECT ID="elmType" NAME="elmType" onChange="changeTypeAmounts(this,'elmAmounts');">
    <OPTION VALUE="Other">Other</OPTION>
    <OPTION VALUE="Soft">Soft</OPTION>
    <OPTION VALUE="Hard">Hard</OPTION>
    </SELECT>
    <SELECT ID="elmAmounts" NAME="elmAmounts">
    </SELECT>
    Let me know if you have any questions
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey pip,

    Thanks alot I would try out this codes and tell you later how it goes.

    Thanks you.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello pip,

    What I actually wanted is this:
    Type = VMobile
    Amount = 1000, 500
    Type = MTN
    Amount = 1500, 750
    Type = MTel
    Amount = 1000, 400
    Type = Globacom
    Amount = 1000, 250
    etc.

    Here's a snippet of my html codes

    &nbsp;&nbsp;&nbsp; Type &nbsp;<SELECT NAME=type><br>
    &nbsp;&nbsp;&nbsp; <OPTION>VMobile
    &nbsp;&nbsp;&nbsp; <OPTION>MTN
    &nbsp;&nbsp;&nbsp; <OPTION>Globacom
    &nbsp;&nbsp;&nbsp; <OPTION>MTel
    &nbsp;&nbsp;&nbsp; <OPTION>Intercelluler
    </SELECT><br>
    &nbsp;&nbsp;&nbsp; Amount &nbsp;<SELECT NAME=type><br>
    &nbsp;&nbsp;&nbsp; <OPTION>1000
    </SELECT><br>


Bookmarks

Posting Permissions

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