gestion de liste déroulante
Posté : 06 janv. 2014, 10:59
Bonjour, je viens de trouvé un script super bien fait étant très null en javascript et jquery j'aurais besoins d'une petite aide pour passé des trois liste en six
[javascript]<!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" />
<title>ajaXray : Multilevel subselect</title>
<script language="javascript" src="Jquery.js"></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+' option[@value="'+ 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'> -- Select -- </option>");
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}
$(document).ready(function()
{
makeSublist('child','grandsun', true, '');
makeSublist('parent','child', false, '1');
});
</script>
</head>
<form>
<select id="parent">
<option value="1">Flower</option>
<option value="2">Animal</option>
</select>
<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>
<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>
</form>
<body>
</body>
</html>[/javascript]
[javascript]<!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" />
<title>ajaXray : Multilevel subselect</title>
<script language="javascript" src="Jquery.js"></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+' option[@value="'+ 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'> -- Select -- </option>");
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}
$(document).ready(function()
{
makeSublist('child','grandsun', true, '');
makeSublist('parent','child', false, '1');
});
</script>
</head>
<form>
<select id="parent">
<option value="1">Flower</option>
<option value="2">Animal</option>
</select>
<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>
<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>
</form>
<body>
</body>
</html>[/javascript]