Команда Javascript активирована с помощью выпадающего меню

Question

Я новичок в использовании Javascript, и мне нужна помощь в проекте, над которым я работаю. Я знаю, что эта проблема, вероятно, очень проста, но Javascript не является моей сильной стороной, и я не могу найти то, что искал сам.

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно изменить то, что отображается в 3D-модели, на основе параметров, доступных в выпадающем меню. Мне просто удалось получить раскрывающееся меню, чтобы изменить материал, но мне нужно выяснить, как заставить его работать с несколькими материалами из того же раскрывающегося меню.

Вот что я сейчас:

HTML код:

<div class="variant-option" id="js-mat-sel"> 
    <div class="variant-option-title">Finish: </div> 
    <select data-variant-option-name="Finish"> 
    <option value="none">Select Finish</option> 
    <option value="Silver" id="silver">Silver</option> 
    <option value="Brass" id="brass">Brass</option> 
    </select> 
</div> 
</div> 

JS код:

$("#js-mat-sel").bind("change", function matchange(){ 
    lapi.applyMaterialToMeshByName("Silver 1", "Group28884"); 
}); 

В настоящее время, как есть, сценарий меняется от основного материала к «Серебро 1 ", если выбран любой параметр в выпадающем меню. Я бы хотел, чтобы он отображал материал «Gold 1», когда я выбираю «Brass» в меню «Drop Down» и показываю «Silver 1», когда выбираю «Silver» из раскрывающегося списка.

Кроме того, следует отметить, что я использую производную от existing API for the 3D rendering company, Lagoa.

[Edit:]

Итак, я знаю, что я здесь делаю неправильно, я просто не знаю, как сделать то, что я правильно хочу.

Следует также отметить, что я получаю «Золото 1» и «Серебро 1» из старой формы кода, которая выполняла то, что я искал с помощью нескольких кнопок, созданных с помощью CSS. Ниже приведен код, который работал. Однако кнопки большие и неудобные, и в будущем мне нужно воссоздать этот код с большим количеством материалов, поэтому выпадающее меню более идеально. Вот исходный код:

HTML:

<div class="btn-large" id="js-material-btn-1">Gold</div> 
<div class="btn-large" id="js-material-btn-2">Silver</div> 

JS:

$("#js-material-btn-1").bind("click", function(){ 
    lapi.applyMaterialToMeshByName("Gold 1", "Group28884"); 
}); 
$("#js-material-btn-2").bind("click", function(){ 
    lapi.applyMaterialToMeshByName("Silver 1", "Group28884"); 
}); 

Answer 1

Вы жёстко "Серебряный 1" в качестве опции вы подаете.

Где бы вы рассчитывали получить «Золото 1»? Я не вижу его нигде в вашем коде.

Дементик предложил правильный ответ, вот как он будет выглядеть.

Например:

<option value="Silver 1" id="silver">Silver</option> 
<option value="Gold 1 " id="brass">Brass</option> 

и ваши ЯШ:

$("#js-mat-sel > select").bind("change", function matchange(){ 
    lapi.applyMaterialToMeshByName($(this).val(), "Group28884"); 
}); 

Обратите внимание на значение параметра содержит фактическое значение вы отправляете.

EDIT: Вы используете .val() в div, но это может использоваться только для элементов ввода/формы (т. Е. Элемента select).Вы должны изменить событие изменения, которое должно быть привязано к элементу select, например: http://jsfiddle.net/6YBpp/

Вы также можете изменить селектор, чтобы выбрать дочерний элемент «select» этого div, который я обновил, чтобы показать ... в любом случае сфера неправильная