Существует множество учебных пособий для создания парных блоков выбора, за которыми я следовал, но я чувствую, что попал в стену своих знаний и доступных учебных пособий, когда дело доходит до заполнения div изображения значением, выбранным во второмвыберите поле.
Я пытаюсь выбрать астрономический объект, а затем цветовой фильтр (красный / зеленый / синий), чтобы «отобразить его».Я имею в виду длину волны света, которую вымышленный телескоп сфотографировал бы для программы моделирования для молодых пользователей телескопа.У меня есть фотографии каждого объекта на каждой длине волны, мне просто нужно иметь возможность отображать туманность M43 на красной длине волны.Приведенный ниже сценарий является сокращенным, но содержит 3 варианта и JavaScript, который я собрал, чтобы получить его до заполнения второго поля выбора.
Может кто-нибудь помочь мне с тем, куда я иду отсюда?Даже если она говорит мне терминологию, которую я должен знать, чтобы найти ее самому, это помогло бы.
Извиняюсь за плохо сформулированный вопрос - это мой первый пост здесь, и я все еще учусь.
// object literal holding data for option elements
var Select_List_Data = {
choices: {
// name of associated select box
// names match option values in controlling select box
0: {
text: ["Select Filter..."],
value: ["Berkeley73Red (Rp)", "Berkeley73Green (V)", "Berkeley73Blue (B)"]
},
Berkeley73: {
text: ["Red (Rp)", "Green (V)", "Blue (B)"],
value: ["Berkeley73Red (Rp)", "Berkeley73Green (V)", "Berkeley73Blue (B)"]
},
Czernik27: {
text: ["Red (Rp)", "Green (V)", "Blue (B)"],
value: ["Czernik27Red (Rp)", "Czernik27Green (V)", "Czernik27Blue (B)"]
},
IC349: {
text: ["Red (Rp)", "Green (V)", "Blue (B)"],
value: ["IC349Red (Rp)", "IC349Green (V)", "IC349Blue (B)"]
}
}
};
// removes all option elements in select box
// removeGrp (optional) boolean to remove optgroups
function removeAllOptions(sel, removeGrp) {
var len, groups, par;
if (removeGrp) {
groups = sel.getElementsByTagName("optgroup");
len = groups.length;
for (var i = len; i; i--) {
sel.removeChild(groups[i - 1]);
}
}
len = sel.options.length;
for (var i = len; i; i--) {
par = sel.options[i - 1].parentNode;
par.removeChild(sel.options[i - 1]);
}
}
function appendDataToSelect(sel, obj) {
var f = document.createDocumentFragment();
var labels = [],
group, opts;
function addOptions(obj) {
var f = document.createDocumentFragment();
var o;
for (var i = 0, len = obj.text.length; i < len; i++) {
o = document.createElement("option");
o.appendChild(document.createTextNode(obj.text[i]));
if (obj.value) {
o.value = obj.value[i];
}
f.appendChild(o);
}
return f;
}
if (obj.text) {
opts = addOptions(obj);
f.appendChild(opts);
} else {
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
labels.push(prop);
}
}
for (var i = 0, len = labels.length; i < len; i++) {
group = document.createElement("optgroup");
group.label = labels[i];
f.appendChild(group);
opts = addOptions(obj[labels[i]]);
group.appendChild(opts);
}
}
sel.appendChild(f);
}
// anonymous function assigned to onchange event of controlling select box
document.forms["demoForm"].elements["category"].onchange = function(e) {
// name of associated select box
var relName = "choices";
// reference to associated select box
var relList = this.form.elements[relName];
// get data from object literal based on selection in controlling select box (this.value)
var obj = Select_List_Data[relName][this.value];
// remove current option elements
removeAllOptions(relList, true);
// call function to add optgroup/option elements
// pass reference to associated select box and data for new options
appendDataToSelect(relList, obj);
};
// populate associated select box as page loads
(function() {
// immediate function to avoid globals
var form = document.forms["demoForm"];
// reference to controlling select box
var sel = form.elements["category"];
sel.selectedIndex = 0;
// name of associated select box
var relName = "choices";
// reference to associated select box
var rel = form.elements[relName];
// get data for associated select box passing its name
// and value of selected in controlling select box
var data = Select_List_Data[relName][sel.value];
// add options to associated select box
appendDataToSelect(rel, data);
})();
<form action="#" method="post" id="demoForm" class="demoForm">
<label class="wrapper" for="states">Target Name</label>
<div class="button dropdown">
<select name="category">
<option value="0" selected="selected">Select a target...</option>
<option value="Berkeley73">Berkeley 73 (Cluster of Stars -40 sec. avg.)</option>
<option value="Czernic27">Czernic27 (Open (galactic) Cluster -40 sec. avg.)</option>
<option value="IC349">IC349 (Reflection Nebula -120 sec. avg.)</option>
</select>
</div>
<div><label class="wrapper" for="states">Filter</label></div>
<select name="choices" id="choices">
<!-- populated using JavaScript -->
</select>
</fieldset>
</form>