1 Replies - 6184 Views - Last Post: 02 November 2012 - 02:56 AM

#1 frwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 14-September 12

Jquery adding dynamic drop down list for row and column based

Posted 14 September 2012 - 08:57 AM

We have simple codes as below. We have an add button on every row where it can add dynamic rows accordingly and this works fine. The problem now we need some more complexity where in the Serial column we need another add button beside the serial drop down list.By click this add button you it will add more drow down list specifically in that column and row. So we are lost as to how to modify it to enable this functionality? Any idea?


<head> 

        <link rel="stylesheet" type="text/css" href="my1.css" media="all" /> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
        <script type="text/javascript" src="jquery.validate.js"></script> 
       
        <script type="text/javascript"> 
        
        $(document).ready(function() {
        	            

            function checkRows(form) {
                //$(form).validate().resetForm();
                //alert("Length : "+$('table.dynatable tbody tr', form).length);
                if ($('table.dynatable tbody tr', form).length > 2) {
                	  alert("Call setup multiple row");
                
                }
            }
          
            var form = $("#form1");
            checkRows(form);
            setupFormValidation(form);
 
            var prot = $('tr.prototype').clone().removeClass('prototype');
            $(form).data('prototype', prot);
            
            var id = 1;
 
            // Add button functionality
            $("table.dynatable button.add").click(function() {
                var form = this.form;
                id++;
                
                // Get a new row based on the prototype row
                //var prot = master.find(".prototype").clone();
                var prot = $(form).data('prototype').clone();
                prot.find('[name^="row_"]').attr("value", 'row_'+id);
                prot.find('[name^="id"]').attr("value", id);
                prot.find('[name^="locationFrom"]').attr('name', 'locationFrom[' + id + ']');
                prot.find('[name^="locationFrom"]').attr('id', 'locationFrom' + id + '');
                prot.find('[name^="locationFrom"]').attr('value', '');
                prot.find('[name^="serial"]').attr('name', 'serial[' + id + ']');
                prot.find('[name^="serial"]').attr('id', 'serial' + id + '');
                prot.find('[name^="serial"]').attr('value', '');
               
                $("#dynamicRow").find('tbody').append(prot);
                $('<button class="dynamic-button">my button</button>').appendTo($('#row_1'));
                setupFormValidation(form);
                
                return false;
            });
            
            function setupFormValidation(form) 
            {       
            	      //alert("validate :");        
                    $(form).validate();
                   
            }
					  
					  
					  $('table.dynatable tbody tr select[name^="locationFrom"]').live('change',handleLocationFromUpdate);  
					  function handleLocationFromUpdate(index)
					  {
						  if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length == 0)
						  {
						  	var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
						  	if(nextValue.val()==$(this).val())
						  	$(this).val('');
						  }
						  else if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length > 0)
						  {
						  	//alert("Last Field");
						  	var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));						  	
						  	if(prevValue.val()==$(this).val())
						  	$(this).val('');
						  }
						  else
						  {
						  	var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
						  	var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));						  	
						  	if(prevValue.val()==$(this).val() || nextValue.val()==$(this).val())
						  	$(this).val('');
						  }
						  
					 }
					 
					 $('table.dynatable tbody tr select[name^="serial"]').live('change',handleSerialUpdate);  
					  function handleSerialUpdate(index)
					  {
						    var sCheck = new Array ();

                $('select[name^="serial"]').each(function(i) {
                	
                	   //alert("VALUE IS : "+$(this).val()+"  "+$("option:selected", this).text() );
                	   jQuery.inArray($(this).val(), sCheck);
                	   if($(this).val()>0)
                	   {
	                     if (jQuery.inArray($(this).val(), sCheck) == -1) {
												   sCheck.push($(this).val());
											 }
											 else {
												alert("Serial "+$("option:selected", this).text()+" Selected More Than Once");
												$(this).val('');
												return false;
											 }
										 }
                });
						  
					 }
            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                
                if ($('table.dynatable tbody tr', form).length > 2) 
                {
                var form = this.form;
 
                $(this).closest("tr").remove();
                }
                
                
                
                $('select[name^="locationFrom"]').each(function(i) {
                    if($(this).closest('tr').next().length > 0 && $(this).closest('tr').prev().length == 0)
									  {
									  	alert("first Field");
									  	var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
									  	if(nextValue.val()==$(this).val())
									  	$(this).val('');
									  }
									  else if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length > 0)
									  {
									  	alert("Last Field");
									  	var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));						  	
									  	if(prevValue.val()==$(this).val())
									  	$(this).val('');
									  }
									  else
									  {
									  	alert("middle Field");
									  	var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
									  	var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));						  	
									  	if(prevValue.val()==$(this).val() || nextValue.val()==$(this).val())
									  	$(this).val('');
									  }
                });
                
                var sCheck = new Array ();

                $('select[name^="serial"]').each(function(i) {
                	
                	   //alert("VALUE IS : "+$(this).val()+"  "+$("option:selected", this).text() );
                	   //jQuery.inArray($(this).val(), sCheck)
                     
                     if($(this).val()>0)
                	   {
	                     if (jQuery.inArray($(this).val(), sCheck) == -1) {
												   sCheck.push($(this).val());
											 }
											 else {
												alert("Serial "+$("option:selected", this).text()+" Selected More Than Once");
												$(this).val('');
												return false;
											}
										 }
                });
                
                
            });
            
            jQuery('.dOnly').live('keyup', function () 
            {     
                 this.value = this.value.replace(/[^0-9\.]/g,''); 
            });
        });
        </script> 
        <style type="text/css"> 
            .dynatable {
                border: solid 1px #000; 
                border-collapse: collapse;
            }
            .dynatable th,
            .dynatable td {
                background-color:#ccc; 
                font-size:14px;
                font-color:#ffffff;
                font-family:Calibri;
            }
            .dynatable .prototype {
                
            }
            label.error 
            { 
            	display: block; 
            	color:red;
            }
            
            td { vertical-align: top; }
            
        </style> 
</head> 
<body>
 
        <form action="" method="post"  enctype="multipart/form-data" id="form1" > 
        
        <table id="table1">
        
        </table>
        <table class="dynatable" id="dynamicRow"> 
            <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>Location</th> 
                    <th>Serial</th>                     
                    <th><button class="add">Add</button></th> 
                </tr> 
            </thead> 
            <tbody> 
                    <tr id="row_1" name="row_1" class="prototype" >
                    	 
                        <td><input type="text" name="id[1]" value="1" /></td> 
                        <td><select class='required' id='locationFrom1' name='locationFrom[1]' >
                        <option value=''>Select Location</option>
                        <option value='1'>Loc 1</option>
                        <option value='2'>Loc 2</option>
                        <option value='3'>Loc 3</option>
                        <option value='4'>Loc 4</option>
                        <option value='5'>Loc 5</option>
                        </select></td>
                        <td><select class='required' id='serial1' name='serial[1]' >
                        <option value=''>Select Serial</option>
                        <option value='1'>Serial 1</option>
                        <option value='2'>Serial 2</option>
                        <option value='3'>Serial 3</option>
                        <option value='4'>Serial 4</option>
                        <option value='5'>Serial 5</option>
                        </select></td> 									
										     
                        <td><button class="remove">Remove</button></td>
                    </tr> 
                     
                    
            </tbody>     
        </table> 
        <input class="buttons" type="submit" name="Submit" value="Submit" /> 
        </form> 
    </body>



Is This A Good Question/Topic? 0
  • +

Replies To: Jquery adding dynamic drop down list for row and column based

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Jquery adding dynamic drop down list for row and column based

Posted 02 November 2012 - 02:56 AM

Hello there,

I am not 100% sure I follow what you are after, so I do apologize in advance if this has no relevance to your issue.

I -think- you are asking how to add a new option to a drop-down list when you click a button? If so, take a look at the below example.

<script type="text/javascript">
	$(document).ready(function()
	{
		$(document).on('click', '#myButton', function()
		{
			$('#mySelect').append('<option>I\'m a jQuery added option, tee hee.</option>');
		});
	});
</script>

<input type="button" id="myButton" value="Click me to add more options"/>
<select id="mySelect">
	<option>I'm an option, tee hee.</option>
</select>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1