Подскажите как сделать, что бы поле для ввода текста появлялось при выборе из выпадающего списка "Другое..." и пропадало при выборе чего то другого?
<!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>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.text-box {
display: none;
}
</style>
<script type="text/javascript" >
(function($) {
$(document).ready( function() {
$('[name="toggle"]').bind('change', function() {
$('.text-box').toggle( $(this).val() );
});
});
})(jQuery)
</script>
</head>
<body>
<form id="form" action="" method="post">
<select id="toggle_hide" type="select" name="toggle">
<option value="t1" id="toggle_hide" type="select" name="toggle" >Опция №1</option>
<option value="t2" for="toggle_hide" id="toggle_hide" type="select" name="toggle" >Опция №2</option>
<option value="t3" for="toggle_hide" id="toggle_hide" type="select" name="toggle" >Опция №3</option>
<option value="t4" id="toggle_show" name="toggle" >Другое...</option>
</select>
<div class="text-box"><input type="text" name="text" value="Другое"></div>
</form>
</body>
</html>