Я работаю над динамическим выпадающим меню:
- с 3 выпадающими полями;
- где сначала необходимо выбрать «серию» в первом раскрывающемся списке;
- где во 2-м нужно выбрать «сезон» во 2-м раскрывающемся списке;
- где на 3-м можно выбрать «эпизод» в 3-м раскрывающемся списке.
Кроме того, кнопки «предыдущая» и «следующая» позволяют переходить назад/вперед в третьем раскрывающемся списке.
Я борюсь со следующими двумя пунктами.
- Я хотел бы связать определенные эпизоды с определенными переменными, которые соответствуют определенным (11-значным) идентификаторам видео YouTube,
- Я хотел бы, чтобы iframe отображал конкретное видео Youtube, относящееся к выбранному сериалу-сезону-эпизоду, в динамических раскрывающихся меню.
Как это можно устроить?
Пожалуйста, найдите ниже код, который я использовал до сих пор.
<style>
.serie {
width: 200px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;
margin-top: 5px;
margin-left: 0px;
color:#000000;
background: #F3FED0;
border: 2px solid #92AD34;
}
.seizoen {
width: 180px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;
margin-top: 2px;
margin-left: 0px;
color:#000000;
background: #F3FED0;
border: 2px solid #92AD34;
}
.aflevering {
width: 210px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;
margin-top: 2px;
margin-left: 0px;
color:#000000;
background: #F3FED0;
border: 2px solid #92AD34;
}
.wrap {
text-align:center;
margin-top: 10px;
}
#div1 {
display: inline-block;
border: 2px solid red;
float: left;
}
#div2 {
display: inline-block;
text-align: center;
border: 0px solid green;
}
#div3 {
display: inline-block;
border: 2px solid blue;
position: relative;
float: right;
}
select.center {
position: relative;
display: inline-block;
}
input.right {
position: relative;
float: right;
}
</style>
<iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0" width="100%" height="450" related="0" allowfullscreen scrolling="no"></iframe>
<div class="wrap">
<div id="div1"><input type="button" value="vorige" onClick="nextTiles(-1)"></div>
<div id="div2">
<form name="myform" id="myForm">
<select class="serie" name="optone" id="seriesSel" size="1">
<option value="" selected="selected">Kies de serie</option>
</select>
<select class="seizoen" name="opttwo" id="seasonSel" size="1">
<option value="" selected="selected">Kies eerst de serie</option>
</select>
<select class="aflevering overlaySelector" id="episodeSel" name="optthree" size="1">
<option value="" selected="selected">Kies eerst het seizoen</option>
</select>
</form>
</div>
<div id="div3"><input type="button" class="right" value="volgende" onClick="nextTiles(1)"></div>
</div>
<script language=javascript>
function setIframeSource() {
//do whatever you're doing
;
}
function nextTiles(i) {
var e = document.getElementsByClassName("overlaySelector")[0];
e.selectedIndex +=i ;
//loop-around from the top or bottom depending on increment/decrement
if(e.selectedIndex == -1) {
if(i>0) e.selectedIndex = 0;
else e.selectedIndex = e.length - 1;
}
setIframeSource(); //with the now updated selected option,
//do whatever you were doing when the user manually chooses something in the dropdown
}
var seriesObject = {
"Donald Duck": {
"Seizoen 2004": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4"],
"Seizoen 2005": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6"]
},
"Bob de Bouwer": {
"Seizoen 2011": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7"],
"Seizoen 2012": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"]
},
"Brandweerman Sam": {
"Seizoen 2009": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7"],
"Seizoen 2010": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"],
"Seizoen 2011": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"],
"Seizoen 2012": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"]
}
}
window.onload = function () {
var seriesSel = document.getElementById("seriesSel"),
seasonSel = document.getElementById("seasonSel"),
episodeSel = document.getElementById("episodeSel");
for (var series in seriesObject) {
seriesSel.options[seriesSel.options.length] = new Option(series, series);
}
seriesSel.onchange = function () {
seasonSel.length = 1; // remove all options bar first
episodeSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
seasonSel.options[0].text = "Kies eerst de serie"
episodeSel.options[0].text = "Kies eerst het seizoen"
return; // done
}
seasonSel.options[0].text = "Kies het seizoen"
for (var season in seriesObject[this.value]) {
seasonSel.options[seasonSel.options.length] = new Option(season, season);
}
if (seasonSel.options.length==2) {
seasonSel.selectedIndex=1;
seasonSel.onchange();
}
}
seriesSel.onchange(); // reset in case page is reloaded
seasonSel.onchange = function () {
episodeSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
episodeSel.options[0].text = "Kies eerst het seizoen"
return; // done
}
episodeSel.options[0].text = "Kies de aflevering"
var cities = seriesObject[seriesSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
episodeSel.options[episodeSel.options.length] = new Option(cities[i], cities[i]);
}
if (episodeSel.options.length==2) {
episodeSel.selectedIndex=1;
episodeSel.onchange();
}
}
}
</script>
