Hello all,
please help!
I need use two jquery scripts - dynamic select box and clone row.
Each of them work fine but I cannot find the way to use it together in one script.
Thank you for any suggestion! Petr
live demo: http://www.guitarcases.cz/index.php?clanek=zakaznik_objednavkawww
<!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">
$(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
$('input', 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
$('input', newRow).each(function(i){
var newID = 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;
});
});
</script>
<script language="javascript">
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 method='POST' name='signupForm' class='cmxform' id='signupForm' action='#'>
<table cellspacing='0'>
<tr></tr>
<tr>
<td><a id="addnew" href="">Add</a></td>
<td>
<select id="parent">
<option value="1">Flower</option>
<option value="2">Animal</option>
</select>
</td>
<td>
<select id="child">
<option class="sub_1" value="1">Rose</option>
<option class="sub_1" value="2">Sunflower</option>
<option class="sub_1" value="3">Orchid</option>
<option class="sub_2" value="4">Cow</option>
<option class="sub_2" value="5">Dog</option>
<option class="sub_2" value="6">Cat</option>
<option class="sub_2" value="7">Tiger</option>
</select>
</td>
<td>
<select id="grandsun">
<option class="sub_1" value="1">Rose type 1</option>
<option class="sub_1" value="2">Rose type 2</option>
<option class="sub_1" value="3">Rose type 3</option>
<option class="sub_2" value="4">Sunflower type 1</option>
<option class="sub_2" value="5">Sunflower type 2</option>
<option class="sub_3" value="6">Orchid type 1</option>
<option class="sub_3" value="7">Orchid type 2</option>
<option class="sub_4" value="8">Cow type 1</option>
<option class="sub_4" value="9">Cow type 2</option>
<option class="sub_5" value="10">Dog type 1</option>
<option class="sub_6" value="11">Cat type 2</option>
<option class="sub_7" value="12">Tiger type 2</option>
<option class="sub_7" value="13">Tiger type 2</option>
<option class="sub_7" value="14">Tiger type 3</option>
</select>
</td>
</tr>
<tr>
<td>
<button id="selectListButton1">Get Value</button> <button id="selectListButton2">Get Text</button>
</td>
</tr>
</table>
</form>
</body>
</html>