Есть список, по выбранному значению должен подгружаться нужный контент (код рабочий):
<!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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
select {margin: 50px auto 0 auto; display: block;}
.container {display: none; margin: 25px 0 0 0;}
#category {width: 302px; height: 22px;}
#category option {color: black;}
iframe {margin: 25px auto; display: block;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#category").click(function (){
var id=this.value;
$("#container > div").hide();
$("#c"+id).show();
});
});
</script>
</head>
<body>
<select name="catlist[]" id="category">
<option>Выберите фильм</option>
<option value="1">Фильм 1</option>
<option value="2">Фильм 2</option>
<option value="3">Фильм 3</option>
</select>
<div id="container">
<div id="c1" class="container"><iframe width="640" height="360" src="http://www.youtube.com/embed/hX2lmU-QWSE?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></div>
<div id="c2" class="container"><iframe width="640" height="360" src="http://www.youtube.com/embed/Copo9ijFZ3o?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></div>
<div id="c3" class="container"><iframe width="640" height="360" src="http://www.youtube.com/embed/KiRuyydYi-E?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></div>
</div>
</body>
</html>
На первый взгляд все нормально, но если ссылок будет 100, 200? -> избыточность кода.
Самый адекватный вариант:
<select>
<option value="http://www.youtube.com/embed/hX2lmU-QWSE?feature=player_detailpage">Фильм 1</option>
<option value="http://www.youtube.com/embed/Copo9ijFZ3o?feature=player_detailpage">Фильм 2</option>
<option value="http://www.youtube.com/embed/KiRuyydYi-E?feature=player_detailpage">Фильм 3</option>
</select>
<iframe width="640" height="360" src="значение из value" frameborder="0" allowfullscreen></iframe>
Подскажите как запихать значение value в ссылку тега <iframe>, да так чтобы при загрузке страницы уже было установлено какой-то значение - на пример первое (http://www.youtube.com/embed/hX2lmU-QWSE?feature=player_detailpage)?
Желательно отсутствие кнопки, и библиотеки jquery.
