Results 1 to 1 of 1

Thread: Need description for script

  1. #1
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Need description for script

    I've got a script with combo boxes/ select lists. Where people can select various options through select lists. But this script needs to have a description.

    Lemme post the script I have first and explain after:

    Code:
    <script type="text/javascript">
    /* <![CDATA[ */
    // For: http://www.webdeveloper.com/forum/showthread.php?p=1058250&posted=1#post1058250
    
    var Products = [
        '-- Select --',    
        'Product 1',    
        'Product 2',    
        'Product 3',    
    ];
    
    var Product1Size = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];	
    var Product1Color = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product1Material = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product1Finish = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product2Size = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    var Product2Color = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product2Material = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product2Finish = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product3Size = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product3Color = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product3Material = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    var Product3Finish = [
        '-- Select --',    
    	"Option 1",
    	"Option 2",
    	"Option 3",
    ];
    
    function toggle(IDS) {										//alert(IDS);
      var sel = document.getElementById('combo_0');
    															//var str = '';
      for (var i=0; i<sel.options.length; i++) {
        document.getElementById('p'+i).style.display = 'none';	//str += i+' ';
      }
    															//alert(str+' of '+sel.options.length);
      sel = document.getElementById(IDS);
      sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
    }
    
    function changeProduct(info) { toggle('p'+info.value); }
    
    function MakeOptions(Arr) {
        var str = '';
        for (var i=0; i<Arr.length; i++) { str += '<option value="'+i+'">'+Arr[i]+'</option>'; }
    //    for (var i=0; i<Arr.length; i++) { str += '<option value="'+Arr[i]+'">'+Arr[i]+'</option>'; }
        document.write(str);
    }
    
    var SelectionResults = '';
    function Validate() {
      SelectionResults = '';
      var str = '';
      var stmp = [];
      var tarr = [];
      for (var i=1; i<Products.length; i++) {			
    	tarr = document.getElementById('p'+i).getElementsByTagName('select');
    	stmp = [];															
        for (var j=0; j<tarr.length; j++) {
    	   if (tarr[j].selectedIndex > 0) { stmp.push(tarr[j].value); }   
        }	
        if ((stmp.length-1) != -1) {
    	  str += '\n'+Products[i]+"_"+stmp.join('_'); 
          if ((stmp.length) != (tarr.length)) {
    	    alert('Incomplete selections for product: '+Products[i]); return false;
    	  } 
        }
      }
      if (str != '') { SelectionResults = str; return true; } else { return false; }
    }
    
    /* ]]> */
    </script>
    
    <style type="text/css">
    h2 { text-align:center; color:red; }
    h3 { text-align:center; color:green; }
    .product {
      display:none;
      width:698px;
    }
    .divWidth {
      width:165px;
      margin:1em .5em;
      text-align:left;
      float:left;
    }
    .selectWidth {
      width:505px;
      margin:1em .5em;
      float:left;
    }
    .clear {
      clear:both;
    }
    
    </style>
    
    
    <form name="products" action="javascript:alert(SelectionResults)" onsubmit="return Validate()">
    
     <div id="leftSide" style="float:left;width:300px">
      Select a Product: 
      <select name="combo0" id="combo_0" onChange="changeProduct(this)">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Products); /* ]]> */
        </script>
      </select>
      <p><input type="submit" value="Submit">
     </div>
     
     <div id="rightSide" style="float:left;width:700px;height:400px;">
      <div id="p0"  class="product"><h2>Description of Product Range</h2></div>
      
      <div id="p1"  class="product"><h2>Product1</h2>
        <div class="divWidth">Select a Size: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */     MakeOptions(Product1Size); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Color: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product1Color); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Material: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product1Material); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Finish: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product1Finish); /* ]]> */
        </script></select></p>
        <center><button onclick="SelectionInformation()">
         <h3>Additional information concerning current selections</h3>
         </button></center><p>
        <p class="clear">&nbsp;</p>
        <h3>Information concerning Style, Size, Weight and Finish of Product</h3>
        More information that I don't know anything about!
      </div>
    
      
      <div id="p2"  class="product"><h2>Product2</h2>
        <div class="divWidth">Select a Size: </div> 
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */     MakeOptions(Product2Size); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Color: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product2Color); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Material: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product2Material); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Finish: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product2Finish); /* ]]> */
        </script></select></p>
        <p class="clear">&nbsp;</p>
        <h3>Information concerning Style, Size, Weight and Finish of Product</h3>
        More information that I don't know anything about!
      </div>
    
      
      <div id="p3"  class="product"><h2>Product3</h2>
        <div class="divWidth">Select a Size: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product3Size); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Color: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product3Color); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Material: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product3Material); /* ]]> */
        </script></select></p>
        <p class="clear"><div class="divWidth">Select a Finish: </div>
        <select class="selectWidth">
        <script type="text/javascript">
    /* <![CDATA[ */    MakeOptions(Product3Finish); /* ]]> */
        </script></select></p>
        <p class="clear">&nbsp;</p>
        <h3>Information concerning Style, Size, Weight and Finish of Product</h3>
        More information that I don't know anything about!
      </div>
      
     </div>
     <br style="clear:both">
    </form>
    But I need to have a description area here. Meaning that I want to to make it happen that whenever somebody selects one of these links, a few lines of text appear underneath the selection box where the selection has been made.

    Can somebody please help me out? Thank you!
    Last edited by Bar2aYunie; 01-08-2010 at 05:28 PM. Reason: Noticed mistake

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
  •