Autor Zpráva
PetrQ
Profil
#1 · Zasláno: 28. 12. 2009, 19:13:36
Odpovědět Citovat
Ahoj všem,
prosím o pomoc - potřebuji upravit skript dynamického select boxu tak, aby fungoval spolu s přidáním nového řádku.
Skript pro přidání řádku přidělí každému novému elementu id. Nejsem ale schopen provázat skript selectu tak, aby v závislosti na vybraném elementu selectu A zobrazil select B nebo C.
Skript pro select boxy je ještě nezměněný. V HTML mám select označeny 'parent0_1' a 'parent0_2', v dalším řádku 1_1 a 1_2 atd. Původní skript selectu používá 'parent' a 'child'. Díky P.

Původní pluginy jsou zde:
Odkaz

Momentální rozvrtaná verze zde:
Odkaz

kód: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script 
			type="text/javascript" 
			src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js">
		</script>
		<script type="text/javascript">
		
		//PŘIDEJ ŘÁDEK
		$(function(){
			// start a counter for new row IDs
			// by setting it to the number
			// of existing rows
			var newRowNum = 0;
		
			// bind a click event to the "Add" link
			$('#addnew').click(function(){
				// increment the counter
				newRowNum += 1;
						
				// get the entire "Add" row --
				// "this" refers to the clicked element
				// and "parent" moves the selection up
				// to the parent node in the DOM
				var addRow = $(this).parent().parent();
				
				// copy the entire row from the DOM
				// with "clone"
				var newRow = addRow.clone();
				
				// set the values of the inputs
				// in the "Add" row to empty strings
				$('select', addRow).val('');
				
				// replace the HTML for the "Add" link 
				// with the new row number
				$('td:first-child', newRow).html(newRowNum);
				
				// insert a remove link in the last cell
				$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
				
				// loop through the inputs in the new row
				// and update the ID and name attributes
				$('select', newRow).each(function(i){
					var newID = 'parent' + newRowNum +  '_' + i;
					$(this).attr('id',newID).attr('name',newID);
				});
				
				// insert the new row into the table
				// "before" the Add row
				addRow.before(newRow);
				
				// add the remove function to the new row
				$('a.remove', newRow).click(function(){
					$(this).parent().parent().remove();
					return false;				
				});
			
				// prevent the default click
				return false;
			});
		});
		
		
	//SELECT BOXY	
		
		
function makeSublist(parent,child,isSubselectOptional,childVal)
{
	$("body").append("<select style='display:none' id='"+parent+child+"'></select>");
	$('#'+parent+child).html($("#"+child+" option"));

	var parentValue = $('#'+parent).attr('value');
	$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

	childVal = (typeof childVal == "undefined")? "" : childVal ;
	$("#"+child).val(childVal).attr('selected','selected');

	$('#'+parent).change(function(){
		var parentValue = $('#'+parent).attr('value');
		$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
		if(isSubselectOptional) $('#'+child).prepend("<option value='none' selected='selected'> -- Select -- </option>");

		$('#'+child).trigger("change");
		$('#'+child).focus();
	});
}


$(document).ready(function()
{
	makeSublist('child','grandsun', true, '');	
	makeSublist('parent','child', false, '1');	
	
	
	
	$("#selectListButton1").click(function(){
		alert( 'Value is: ' + $('.parent').val() );
	});
	$("#selectListButton2").click(function(){
		alert( 'Text is: ' + $('.child :selected').text() );
	});

});
</script>
		
		
	</head>
	<body>
		<form>

			<table id="tabdata">
				
				<tbody>
					<tr>
						<td><a id="addnew" href="">Add</a></td>
				<td><select id="parent0_1">
	<option value="1">CD</option>
	<option value="2">DVD</option>

</select>
<select id="parent0_2">
	<option class="sub_1" value="1">Jazz</option>
	<option class="sub_1" value="2">POP</option>
	<option class="sub_1" value="3">Rock</option>
	
	<option class="sub_2" value="4">Horor</option>
	<option class="sub_2" value="5">Komedie</option>

	<option class="sub_2" value="6">Dokument</option>
	<option class="sub_2" value="7">Pohádka</option>
</select>
</td>

						<td></td>
					</tr>
				</tbody>
			</table>
			
			<input id="go" name="go" type="submit" value=" Save " />
		</form>
	</body>
</html>
Molda
Profil *
#2 · Zasláno: 30. 12. 2009, 02:36:32
Odpovědět Citovat
změny sem označil

option Vyber sem přidal aby došlo ke změně selectu dva

snad sem tě dobře pochopil 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<script 
            type="text/javascript" 
            src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js">
        </script>        
<script type="text/javascript">
        
        
        
        //PŘIDEJ ŘÁDEK
        $(function(){
            // start a counter for new row IDs
            // by setting it to the number
            // of existing rows
            var newRowNum = 0;
        
            // bind a click event to the "Add" link
            $('#addnew').click(function(){
                // increment the counter
                newRowNum += 1;
                        
                // get the entire "Add" row --
                // "this" refers to the clicked element
                // and "parent" moves the selection up
                // to the parent node in the DOM
                var addRow = $(this).parent().parent();
                
                // copy the entire row from the DOM
                // with "clone"
                var newRow = addRow.clone();
//pridano_1/////////////////                
                s1 = $('#parent0_1').val();
                s2 = $('#parent0_2').val(); 
                $('select', newRow).val([s1, s2]);
//konec_pridano_1//////////////////                
                // set the values of the inputs
                // in the "Add" row to empty strings
                $('select', addRow).val('');                      
                
                // replace the HTML for the "Add" link 
                // with the new row number
                $('td:first-child', newRow).html(newRowNum);
                
                // insert a remove link in the last cell
                $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
                
                // loop through the inputs in the new row
                // and update the ID and name attributes
                $('select', newRow).each(function(i){
                    var newID = 'parent' + newRowNum +  '_' + i;
                    $(this).attr('id',newID).attr('name',newID);
                });

                // insert the new row into the table
                // "before" the Add row
                addRow.before(newRow);
                
                // add the remove function to the new row
                $('a.remove', newRow).click(function(){
                    $(this).parent().parent().remove();
                    return false;                
                });
            
                // prevent the default click
                return false;
            });
        });
        
        
    //SELECT BOXY    
        
        
function makeSublist(parent,child,isSubselectOptional,childVal)
{
    $("body").append("<select style='display:none' id='"+parent+child+"'></select>");
    $('#'+parent+child).html($("#"+child+" option"));
    var parentValue = $('#'+parent).attr('value');
    $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
    childVal = (typeof childVal == "undefined")? "" : childVal ;
    $("#"+child).val(childVal).attr('selected','selected');
    $('#'+parent).change(function(){
        var parentValue = $('#'+parent).attr('value');
        $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
        if(isSubselectOptional) $('#'+child).prepend("<option value='none' selected='selected'> -- Select -- </option>");
        $('#'+child).trigger("change");
        $('#'+child).focus();
    });
}
$(document).ready(function()
{
    makeSublist('child','grandsun', true, '');    
    makeSublist('parent','child', false, '1');    
    
    
    
    $("#selectListButton1").click(function(){
        alert( 'Value is: ' + $('.parent').val() );
    });
    $("#selectListButton2").click(function(){
        alert( 'Text is: ' + $('.child :selected').text() );
    });
    
//pridano_2///////////////////
                             
    $("#parent0_1").change(function(){
                s1 = $('#parent0_1').val();
                
                switch (s1) {
                  case '1' : $("#parent0_2").html('<option class="sub_1" value="vyber">Vyber</option>');break;
                  case '2' : $("#parent0_2").html('<option class="sub_1" value="jazz">Jazz</option><option class="sub_1" value="pop">Pop</option><option class="sub_1" value="rock">Rock</option>');break;
                  case '3' : $("#parent0_2").html('<option class="sub_2" value="horor">Horor</option><option class="sub_2" value="komedie">Komedie</option><option class="sub_2" value="dokument">Dokument</option><option class="sub_2" value="pohadka">Pohádka</option>');break;  
                  default : ;
                  
                  } 
                
                });
//konec_pridano_2/////////////                 
});
</script>                      
  </head>    
  <body>
         
    <form method="post" action="1.php">            
      <table id="tabdata">                                 
        <tbody>                    
          <tr>                        
            <td>
              <a id="addnew" href="">Add</a>
            </td>
                            
            <td>                
              <select id="parent0_1">
//pridáno_3/////////////////////                  
                <option value="1">Vyber
                </option>
//konec_pridáno_3/////////////////////                
                <option value="2">CD
                </option>    
                <option value="3">DVD
                </option>
              </select>
              
              <select id="parent0_2">    
//////vymazano//////////////////                
              </select>
              
            </td>
                                    
            <td>
            </td>                    
          </tr>                
        </tbody>            
      </table>                         
      <input id="go" name="go" type="submit" value=" Save " />        
    </form> 
    <div></div>   
  </body>
</html>
Časová prodleva: 6 dní
PetrQ
Profil
#3 · Zasláno: 5. 1. 2010, 08:54:34
Odpovědět Citovat
Děkuju moc, to je přesně ono.
Kdyby to někdo potřeboval, je to spolu s rozdělaným kalkulátorem tady.
Ukázka
Časová prodleva: 17 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0