<select name="" class="renk">
<option value="KIRMIZI/S">KIRMIZI/S</option>
<option value="KIRMIZI/M">KIRMIZI/M</option>
<option value="KIRMIZI/L">KIRMIZI/L</option>
<option value="KIRMIZI/XL">KIRMIZI/XL</option>
<option value="MAVİ/S">MAVİ/S</option>
<option value="MAVİ/M">MAVİ/M</option>
<option value="MAVİ/L">MAVİ/L</option>
<option value="MAVİ/XL">MAVİ/XL</option>
<option value="TURUNCU/S">TURUNCU/S</option>
<option value="TURUNCU/M">TURUNCU/M</option>
</select>bu şekilde select menum var.bu select menüyü 2 adet select e çevirmek istiyorum mesela.
Mavi ye geldiğinde s,m,l,xl gelsin turuncu ya tıkladığında 2. select de s.m gelsin sadece ve 2 seçimi de yaptıktan sonra en üsteki örnek select menüde o option seçilmiş olsun.
Ben buraya kadar yaptım ama devamını yardım bekliyorum.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(e) {
var onceki = "";
$(".renk option").each(function() {
var yazi = $(this).text();
var arr = yazi.split('/');
if (onceki == arr[0]){
$(".beden").prepend("<option value='"+$(this).val()+"'>"+arr[1]+"</option>");
}
else {
onceki = arr[0];
$(".renk2").prepend("<option value='"+$(this).val()+"'>"+arr[0]+"</option>");
$(".beden").prepend("<option value='"+$(this).val()+"'>"+arr[1]+"</option>");
}
});
$(".renk2").click(function(){
$(".beden").css("display","block");
var value = $(this).val();
var arr2 = value.split('/');
var value2 = $(".beden option").val();
var arr3 = value2.split('/');
$(".beden").find(arr2[0]).css("color","red");
});
});
</script>
</head>
<body>
<select name="" class="renk">
<option value="KIRMIZI/S">KIRMIZI/S</option>
<option value="KIRMIZI/M">KIRMIZI/M</option>
<option value="KIRMIZI/L">KIRMIZI/L</option>
<option value="KIRMIZI/XL">KIRMIZI/XL</option>
<option value="MAVİ/S">MAVİ/S</option>
<option value="MAVİ/M">MAVİ/M</option>
<option value="MAVİ/L">MAVİ/L</option>
<option value="MAVİ/XL">MAVİ/XL</option>
<option value="TURUNCU/S">TURUNCU/S</option>
<option value="TURUNCU/M">TURUNCU/M</option>
</select>
<div id="sonuc">
<select class="renk2"></select>
<select class="beden" style="display:none;"></select>
</div>
</body>
</html> 