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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts

    2 Drop Down Menus - One's Selection Changes 2nd's Options

    I'm trying to make this dynamic because the option values are going to change on the fly.

    Using the example provided via the code.. If you choose 'Selection 1' in the first drop down menu - the second drop down will only display options that have an "A" contained within the value. If you choose 'Selection 2' in the first drop down - the second drop down will only display options that have a "B" contained within the value.

    I'm new to Javascript programming and I'm just having trouble figuring out a way to perform an operation to check each of the values within the second drop-down's options.

    I'm sure it's very simple - but I'm new to this so I appreciate any help at all.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function assignSelection() {
     elem = document.getElementById("selection");
     elem.disabled = false;
    }
    function loadPage()
    {
    	//var string = "0005B"
    	//if (string.indexOf("B")!=-1) {}
    }
    function onSelect() {
    }
    </script>
    </head>
    <body onLoad="loadPage()">
    <form name="oForm">
      <p>
        <select name="main" onchange="assignSelection()">
          <option value="Select"> SELECT ONE </option>
          <option value="SelectA"> Selection 1 </option>
          <option value="SelectB"> Selection 2 </option>
        </select>
      </p>
      <p>
        <select name="products" id="selection" onChange="onSelect()" disabled>
          <option value="Select"> Select One </option>
          <option value="1000A" name="attr"> Selection 1 - 1000 </option>
          <option value="1001A" name="attr"> Selection 1 - 1001 </option>
          <option value="1002A" name="attr"> Selection 1 - 1002 </option>
          <option value="1000B" name="attr"> Selection 2 - 1000 </option>
          <option value="1001B" name="attr"> Selection 2 - 1001 </option>
          <option value="1002B"> Selection 2 - 1002 </option>
        </select>
      </p>
    </form>
    </body>
    </html>
    Edit: Ugh, still not much luck figuring it out. Damn.
    Last edited by KyleVA; 05-28-2009 at 02:51 AM.

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function assignSelection() {
    	elem = document.getElementById("selection");
     	elem.disabled = false;
    	var attrs = document.oForm.products.length;
    	for(i = 1; i < attrs; i++){
    	document.oForm.products.options[i].style.display = '';	
    	}
    	var metal = document.oForm.main.selectedIndex;
    	if (metal == 1) {	
    	var attrs = document.oForm.products.length;
    	for(i = 1; i < attrs; i++){
    	var pvalue = document.oForm.products.options[i].value;
    	if (pvalue.indexOf("B")!=-1) {
    	document.oForm.products.options[i].style.display = 'none';
    	}
    	}
    	elem = document.getElementById("selection");
     	elem.selectedIndex = 0;
    	}
    	else if (metal == 2) {
    	var attrs = document.oForm.products.length;
    	for(i = 1; i < attrs; i++){
    	var pvalue = document.oForm.products.options[i].value;
    	if (pvalue.indexOf("A")!=-1) {
    	document.oForm.products.options[i].style.display = 'none';
    	}
    	}
    	elem = document.getElementById("selection");
     	elem.selectedIndex = 0;
    	}
    	else {
    	elem = document.getElementById("selection");
     	elem.disabled = true;
     	elem.selectedIndex = 0;
    	}
    	
    }
    
    </script>
    </head>
    
    <body onLoad="loadPage()">
    <form name="oForm">
    <p>
      <select name="main" onchange="assignSelection()">
        <option value="Select"> SELECT ONE </option>
        <option value="SelectA"> Selection 1 </option>
        <option value="SelectB"> Selection 2 </option>
      </select>
    </p>
    <p>
    <select name="products" id="selection" disabled>
    <option value="selected" selected> --SELECT ONE-- </option>
    <option value="1000A"> Selection 1 - 1000 </option>
    <option value="1001A"> Selection 1 - 1001 </option>
    <option value="1002A"> Selection 1 - 1002 </option>
    <option value="1000B"> Selection 2 - 1000 </option>
    <option value="1001B"> Selection 2 - 1001 </option>
    <option value="1002B"> Selection 2 - 1002 </option>
    </select>
    </p>
    </form>
    </body>
    </html>
    Edit: GOT IT!! Ha, my first Javascript that I've done all on my own. If anyone here would look at it and tell me if it's proper and would work effectively on a live web site I would really appreciate it.. Haha, I'm stoked.
    Last edited by KyleVA; 05-28-2009 at 06:10 AM.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Can anyone help me get the following code working in IE? :X

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function assignSelection() {
    	var elem = document.getElementById("selection");
    	var selectionWidth = elem.offsetWidth;
    	elem.style.width = selectionWidth;
    	var attrs = elem.length;
    	for (i = 1; i < attrs; i++){
    	elem.options[i].style.display = '';	
     	elem.disabled = false;
    	}
    	var metal = document.option_form.main.selectedIndex;
    	if (metal == 1) {	
    	for (i = 1; i < attrs; i++){
    	var pvalue = elem.options[i].value;
    	if (pvalue.indexOf("B")!=-1) {
    	elem.options[i].style.display = 'none';
    	}
    	}
    	}
    	else if (metal == 2) {
    	for (i = 1; i < attrs; i++){
    	var pvalue = elem.options[i].value;
    	if (pvalue.indexOf("A")>-1) {
    	elem.options[i].style.display = 'none';
    	}
    	}
    	}
    	else {
     	elem.disabled = true;
    	}
    	if (metal == 2 || metal == 1 || metal == 0) {
     	elem.selectedIndex = 0;
    	}
    	}	
    </script>
    </head>
    
    <body onload="getIDattr()">
    <form name="option_form">
    <p>
      <select name="main" onChange="assignSelection()" onfocus="setWidth()">
        <option value="Select"> SELECT ONE </option>
        <option value="SelectA"> Selection 1 </option>
        <option value="SelectB"> Selection 2 </option>
      </select>
    </p>
    <p>
    <div>
    <select id="selection" disabled>
    <option value="" selected> --SELECT ONE-- </option>
    <option value="1000A"> Selection 1 - 1000 </option>
    <option value="1001A"> Selection 1 - 1001 </option>
    <option value="1002A"> Selection 1 - 1002 </option>
    <option value="1003A"> Selection 1 - 1003333333 </option>
    <option value="1000B"> Selection 2 - 1000 </option>
    <option value="1001B"> Selection 2 - 1001 </option>
    <option value="1002B"> Selection 2 - 1002 </option>
    <option value="1003B"> Selection 2 - 1003 </option>
    <option value="1004B"> Selection 2 - 1004 </option>
    </select>
    </div></p>
    </form>
    </body>
    </html>


  •  

    Posting Permissions

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