Autor | Zpráva | ||
---|---|---|---|
PetrQ Profil |
#1 · Zasláno: 28. 12. 2009, 19:13:36
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
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
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: 14 let
|
0