how to change one dropdown option with name on change of another dropdown option with value

If you want to change one drop-down option name with change of another drop-down option value for your particular need.I am just introducing drop-down option how to use for on change. Just take a look.
I am just going to make two dropdown Dependent.Second dropdown is dependent with option name on first dropdown with option value.

HTML

<select name="select11" id="select11">
<option value="1">Fruits</option>
<option value="2">Animals</option>
<option value="3">Birds</option>
<option value="4">Cars</option>
</select>

<select name="select12" id="select12">
<option value=" " name="1">Litchi</option>
<option value=" " name="1">Mango</option>
<option value=" " name="1">Orange</option>
<option value=" " name="2">Lion</option>
<option value=" " name="2">Fox</option>
<option value=" " name="2">Bear</option>
<option value=" " name="2">Parrot</option>
<option value=" " name="3">Hawk</option>
<option value=" " name="4">Maruti</option>
</select>

JAVASCRIPT

<script>
		   $("#select11").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select12 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[name=' + id + ']');
$('#select12').html(options);
});
		   </script>