Quick Question. Hope someone can help

slipondajimmy · Jul 6, 2008

Hey Everyone.

I need to know how in the world I can make it so the 3-6, 6-12, and 12-18 options will only show that white is available. Every other size except these are available in the other colors.

Code:

<td><select name="os1" class="cnt" id="size">
                                            <option>3-6mo</option>
					    <option>6-12mo</option>
					    <option>12-18mo</option>
					    <option>2T</option>
					    <option>3T</option>
					    <option>4T</option>
					    <option>XS</option>
				            <option>S</option>
					 </select>
					 <select name="os0" class="cnt" id="select">
                                                 <option selected>White</option>
                                            <option>Red</option>
                                            <option>Gray</option>
         			 </select>
          <input name="on0" type="hidden" id="on02" value="color" />
		  <input name="on1" type="hidden" id="on12" value="size" />
          <input name="quantity" type="text" id="quantity2" value="1" size="3" maxlength="5" /></td>
                                        </tr>
                                    </table></td>

Eric · Jul 6, 2008

Not the best, but it works.

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Untitled 1</title>
	<script type="text/javascript" language="Javascript">
	function onlyWhite(select)
	{
		var select = document.getElementById('size');
		var value = select.options[select.selectedIndex].value;
		var cselect = document.getElementById('select');

		if (value == '3-6mo' || value == '6-12mo' || value == '12-18mo')
		{
			cselect.options.length = 0;
			cselect.options[0] = new Option("----------", "-1", false, false);
			cselect.options[1] = new Option("White", "white", false, false);
		}
		else
		{
			cselect.options.length = 0;
			cselect.options[0] = new Option("----------", "-1", false, false);
			cselect.options[1] = new Option("White", "white", false, false);
			cselect.options[2] = new Option("Red", "red", false, false);
			cselect.options[3] = new Option("White", "Gray", false, false);
		}
		return;
	}
	</script>
</head>

<body>

<select name="os1" class="cnt" id="size" onchange="onlyWhite()">
	<option value="-1">----------</option>
	<option value="3-6mo">3-6mo</option>
	<option value="6-12mo">6-12mo</option>
	<option value="12-18mo">12-18mo</option>
	<option value="2T">2T</option>
	<option value="3T">3T</option>
	<option value="4T">4T</option>
	<option value="XS">XS</option>
	<option value="S">S</option>
</select>
<select name="os0" class="cnt" id="select">
	<option value="-1">----------</option>
	<option value="white">White</option>
	<option value="red">Red</option>
	<option value="gray">Gray</option>
</select>

</body>
</html>

Bruce_KD · Jul 6, 2008

Code:

<script type='text/javascript'>
function disableColors(select) {
  var sId = select.selectedIndex < 3?true:false;
  var colors = document.getElementById('select');
  colors.options[1].disabled = sId;
  colors.options[2].disabled = sId;  
  if (sId && colors.selectedIndex > 0) colors.selectedIndex = 0;
}

</script>

<select name="os1" class="cnt" id="size" onchange="disableColors(this);">
  <option>3-6mo</option>
  <option>6-12mo</option>
  <option>12-18mo</option>
  <option>2T</option>
  <option>3T</option>
  <option>4T</option>
  <option>XS</option>
  <option>S</option>
</select>

<select name="os0" class="cnt" id="select">
  <option>White</option>
  <option>Red</option>
  <option>Gray</option>
</select>

This basically says:
When you change the size of the shirt, check which size you changed it to.
If its the first, second, or third option (selectedIndex starts with the top option being 0, so when selectedIndex < 3), disable the second and third color options.

After doing that, check which color was previously selected. If you had to disable options And the second or third color was selected, set it to white.

Bruce

slipondajimmy · Jul 7, 2008

Thanks for everyones help. I will try to implement this and see what happens

slipondajimmy · Jul 7, 2008

Hey Eric,

I have another question. Is there a way to make that so it will always show 3-6 and white as the default? So the first thing someone sees in the drop down would look this

3-6 White

instead of

------ -------

Then the customer would be able to pick the other sizes and color.

The reason I want to do this is these are only available in white

<option>3-6mo</option>
<option>6-12mo</option>
<option>12-18mo</option>

The other ones are multiple colors.

Thanks again

shockie · Jul 7, 2008

Code:

<option selected>3-6mo</option>

slipondajimmy · Jul 7, 2008

Thanks Shockie I will try that out tonight

Quick Question. Hope someone can help

VIP Member

VIP Member

Established Member

VIP Member

VIP Member

VIP Member

VIP Member

fridaymarketplace.com

TheCryptoTrader.com

Asset.si

halkor.com

irsaudit.xyz

RaceBud.com

AbdulGroup.com

TaxAuditAssistance.com

theretirementfund.com

InsuranceConsortium.com

Similar threads

We're social

fridaymarketplace.com

TheCryptoTrader.com

Asset.si

halkor.com

irsaudit.xyz

RaceBud.com

AbdulGroup.com

TaxAuditAssistance.com

theretirementfund.com

InsuranceConsortium.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling