Urgent help - dropdown issue

Cyberoxy · June 28, 2011

Hey guys / gals

When you select one example "Faith.jpg" from the first dropdown, then another dropdown should link this and display several prices. Each image with different prices.

How to do this in code?? I urgently need your help. I'm busy developing for my client. Thanks!

Look at my codes below:

    <body>

    <select name="ORDER 1" id="dlist1" onchange="swapImage1()">
    <optgroup label="Sow Seeds of Love">
    <option value="None">None</option>
    <option value="Images/SowSeeds/Faith_small.jpg">Faith </option>
    <option value="Images/SowSeeds/Hope_small.jpg">Hope</option>
    <option value="Images/SowSeeds/Grace_small.jpg">Grace</option>
    <option value="Images/SowSeeds/Peace_small.jpg">Peace</option>
    <option value="Images/SowSeeds/FlowerSeedSachet_small.jpg">Flower Seed Sachet</option>
    </optgroup>
    </select>

    //This is linked to the above first dropdown when you select Faith.jpg
    <select>
    <option>Description</option>
    <option>Card A6 (blank) - R32.00 </option>
    <option>Memo Book A6 - R62.00 </option>
    <option>Gift Tags (4 designs per packet) - R8.50</option>
    <option>Gift Tags - Single - Assorted - R1.80</option>
    <option>Key Rings Perspex - R30.00</option>
    <option>Fridge Art - R40.00 </option>
    </select>

AND for example you choose another image with different prices

    //This is linked to the above first dropdown when you select Hope.jpg (different prices)
    <select>
    <option>Description</option>
    <option>Card A6 (blank) - R35.00 </option>
    <option>Memo Book A6 - R65.00 </option>
    <option>Gift Tags (4 designs per packet) - R9.50</option>
    <option>Gift Tags - Single - Assorted - R1.80</option>
    <option>Key Rings Perspex - R20.00</option>
    <option>Fridge Art - R40.00 </option>
    </select>
    </body>

Thank you :-)

Maq · June 28, 2011

In the future, please place

OR

tags around your code.

I don't see any PHP code there. If you want to do this with PHP the page will reload, if not, you need to use JS. Where exactly are you getting caught on?

Cyberoxy · June 29, 2011

I dont know how to code in php or java. :-( Can you show me how you can do this? I know if you use php or java, the page will reload but I just dont know how to do this.

Your help much appreciated!

Thanks

Natalie

Maq · June 29, 2011

The easiest way is to do this with Javascript. Have an onChange() event in your select menu and change the second one accordingly. Here is a good example - http://www.trans4mind.com/personal_development/JavaScript/tripleMenu.htm

Cyberoxy · June 29, 2011

Thanks for giving me this link. It is very useful. Now I have tried to code and it is working yay but there is one problem.

You know I am using HTML and javascript. Everything is working expect the price list (from table) linked to the dropdown list is not shown up.

When I inserted the javascript code for displaying image when selected item on the order list, it is working well but the first and second price list are not shown up when I select an item on the dropdown list. Something with Javascript. Can you check my below code where is incorrect? Your help much appreciated. I must say it is urgent. Please help me

Look at the red and blue code below:

Thanks for giving me this link. It is very useful. Now I have tried to code and it is working yay but there is one problem.

You know I am using HTML and javascript. Everything is working expect the price list (from table) linked to the dropdown list is not shown up.

When I inserted the javascript code for displaying image when selected item on the order list, it is working well but the first and second price list are not shown up when I select an item on the dropdown list. Something with Javascript. Can you check my below code where is incorrect? Your help much appreciated. I must say it is urgent. Please help me

Look at the red and blue code below:

<head>
<script type="text/javascript">
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") : "";
}
}
// displaying image when selected item on the order list
</script>

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

<script type="text/javascript">
function swapImage2() {
var image = document.getElementById("imageToSwap2");
var dropd = document.getElementById("dlist2");
image.src = dropd.value;
};

</script>

</head>

<body>

<table width="700"> // it is the first order list

<tr>
<td>
<p class="Card">ORDER 1:</p>

</td>
</tr>
<tr>
<td>
<p class="Dropdown">
<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/Order_names/SowSeeds/Faith01_yellow.jpg">Faith</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/Order_names/SowSeeds/Grace01_green.jpg">Grace</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/Order_names/SowSeeds/Hope01_blue.jpg">Hope</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/Order_names/SowSeeds/Peace01_pink.jpg">Peace</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/Order_names/SowSeeds/FlowerSeedSachet01_two girls.jpg">Flower Seed</option>
</optgroup>
</select>

</p>

</td>
<td>  //it should display image when selected item from the order list - it is working well
<img class="ImageToSwap" id="imageToSwap1" src="Images/DropdownImages.gif" width="147" height="207" />

</td>

</tr>
</table>


//This price list is not shown up when selected item from the order list.
<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>


<table width="700">  // it is the second order list

<tr>
<td>
<p class="Card">ORDER 2:</p>

</td>
</tr>
<tr>
<td>
<p class="Dropdown">
<select name="ORDER2" size="12" multiple="multiple" id="dlist2" onchange="swapImage2()">
<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/Order_names/SowSeeds/Faith01_yellow.jpg">Faith</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/Order_names/SowSeeds/Grace01_green.jpg">Grace</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/Order_names/SowSeeds/Hope01_blue.jpg">Hope</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/Order_names/SowSeeds/Peace01_pink.jpg">Peace</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/Order_names/SowSeeds/FlowerSeedSachet01_two girls.jpg">Flower Seed</option>
</optgroup>
</select>

</p>

</td>
<td>
<img class="ImageToSwap" id="imageToSwap2" src="Images/DropdownImages.gif" width="147" height="207" />

</td>

</tr>
</table>

//This price list is also not shown up when selected item from the SECOND order list
<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="Td1"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td>
<td id="Td2"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td>
<td id="Td3"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td>
<td id="Td4"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td>
<td id="Td5"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td>
<td id="Td6"></td>
</tr>
</table>

</body>

Thank you

Natz

Maq · June 29, 2011

Like I said before, use

OR

tags around your code.

Cyberoxy · June 29, 2011

Im sorry to furious you but I am very new to javascript or php. I am still struggling with this. Still not working.

I will much much appreciate if you can help me to correct my codes so that I can understand what you did. I need to improve understanding of javascript and php. I hope you dont mind helping me to fix codes. Big favour, please!

Thanks for your time hope to hear from u soon.

Natz

Sign In

Urgent help - dropdown issue

Recommended Posts

Cyberoxy

Link to comment

Share on other sites

Maq

Link to comment

Share on other sites

Cyberoxy

Link to comment

Share on other sites

Maq

Link to comment

Share on other sites

Cyberoxy

Link to comment

Share on other sites

Maq

Link to comment

Share on other sites

Cyberoxy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information