Jquery dynamický select box a clone row – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Jquery dynamický select box a clone row – JavaScript, AJAX, jQuery – Fórum – Programujte.comJquery dynamický select box a clone row – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Petr
~ Anonymní uživatel
746 příspěvků
25. 12. 2009   #1
-
0
-

Hezký večer,
prosím o radu, s jquery nemám mnoho zkušeností.
Potřebuji použít v jedné stránce scripty na dynamický select box a přidání řádku s tímto select boxem.
Nejsem schopen spojit oba skripty, pokud to tedy vůbec půjde.
Díky za každou radu Petr

odkaz: 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>

Nahlásit jako SPAM
IP: 193.86.149.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 2 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý