Выпадающее меню Onchange

Question

Как я могу принять значение, когда пользователь выбирает параметр из выпадающего меню (выберите) и добавит его с другим выбором другого выпадающего меню и выведет итог знака? Я хочу, чтобы эта сумма автоматически менялась с помощью метода on-change. Я написал свой код в JavaScript, используя DOM, чтобы написать форму! Не могли бы вы мне помочь?

Answer 1

Я лично рекомендовал бы это сделать с помощью AngularJs. Если вы используете Angular, просто назначая элемент DOM с именем модели (ng-model), и вы можете динамически изменять элементы внутри вашего раскрывающегося списка в вашем javascript. Проверить это очень простой пример:

http://plnkr.co/edit/?p=preview

и здесь документация о том, как использовать утилиту нг-изменений, которая поставляется с AngularJs:

http://docs.angularjs.org/api/ng.directive:ngChange

(редактирование: Я думаю, я должен более подробно описывайте, что происходит в этом примере. В основном, то, что находится внутри <div ng-controller="Controller">, будет привязано к контроллеру под названием «Контроллер» в script.js. При назначении флажка ng-model="confirmed" он связывает переменную с тем же именем с установите флажок. ee пара строк вниз, просто вызов {{подтверждено}} может вызвать значение из html. Кроме того, назначение ng-change="change()" элементу в основном говорит контроллеру вызвать функцию, change(), всякий раз, когда происходят изменения, внесенные в рассматриваемый элемент. Надеюсь, это поможет)

Answer 2

Это обычный javascript.

function Total() 
{ 

var e1 = document.getElementById("ObjectsIDValue1"); 
var e2 = document.getElementById("ObjectsIDValue2"); 

if(e1.selectedIndex < 0||e2.selectedIndex < 0) 
    return;//nothing is selected in 1 of the dropdowns 

var ValueUserSelected1= new Number(e1.options[e1.selectedIndex].value); 
var ValueUserSelected2= new Number(e2.options[e2.selectedIndex].value); 

var e3 = document.getElementById("TotalsIDValue"); 

e3.value = ValueUserSelected1+ValueUserSelected2;//assuming it's an input:text 
}; 

И просто добавьте в ваши выбранные объекты.

<Select id = "ObjectsIDValue1" onchange="Total();"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <!-- more option objects --> 
</Select> 


<Select id = "ObjectsIDValue2" onchange="Total();"> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <!-- more option objects --> 
</Select> 

Примечание: Это не проверяет, что там в ваш выбор это число.

Редактировать: Поскольку вы, кажется, новичок здесь в переполнении стека, я хотел бы упомянуть, что если вы нашли, что это решило вашу проблему, пожалуйста, отметьте его как принятый ответ, указав галочку. Также, если вы нашли это полезным и у вас достаточно очков для голосования, сделайте это тоже.

Надеюсь, это поможет.

Edit2: С замечанием OP, я думаю, что вы ищете для этого,

document.getElementById("ObjectsIDValue1").onchange = function(){Total()}; 

document.getElementById("ObjectsIDValue2").onchange = function(){Total()}; 

только добавить, что после того, как вы определяете Total();

Редактировать 3: Я хочу быть готовым и объяснять, что то, что вы хотите сделать, ОЧЕНЬ уродливое в обычном Javascript. Я бы порекомендовал JS-библиотеку, такую ​​как JQuery, где это намного проще и проще в кодировании.

В любом случае здесь ВСЕ код, необходимый для этого.

<script type = "text/javascript"> 

//Create Selects from an Array 
function CreateSelectFromArray (SelectID, ArrayOfValues) 
{ 
    var Code=""; 
    Code += "<Select id='"+SelectID+"'>"; 
    for(var x = 0; x < ArrayOfValues.length; x++) 
    { 
     Code += "<option>"; 
     Code += ArrayOfValues[x]; 
     Code += "</option>"; 
    } 
    Code += "</Select>"; 

    return Code; 
}; 

//Repopulate a select from a start and end value 
function ChangeSelectFromValues (SelectID, StartValue,EndValue) 
{ 
    var Code=""; 
    var SelectObject = document.getElementById(SelectID); 
    for(var x = StartValue; x <= EndValue; x++) 
    { 
     Code += "<option>"; 
     Code += x; 
     Code += "</option>"; 
    } 
    SelectObject.innerHTML = Code; 
}; 

//Add up the values of 2 Selects (currently hardcoded) 
function Total() 
{ 

var e1 = document.getElementById("ObjectsIDValue1"); 
var e2 = document.getElementById("ObjectsIDValue2"); 

if(e1.selectedIndex < 0||e2.selectedIndex < 0) 
    return;//nothing is selected in 1 of the dropdowns 

var ValueUserSelected1= new Number(e1.options[e1.selectedIndex].value); 
var ValueUserSelected2= new Number(e2.options[e2.selectedIndex].value); 

var e3 = document.getElementById("TotalsIDValue"); 

e3.value = ValueUserSelected1+ValueUserSelected2;//assuming it's an input:text 
}; 


var yourArray = [5,10,15]; 
var SelectCode=""; 

SelectCode += CreateSelectFromArray ('FirstSelect', yourArray);//create select with array values 
SelectCode += CreateSelectFromArray ('SecondSelect', yourArray);//create select with array values 
SelectCode += CreateSelectFromArray ('ObjectsIDValue1', [1,2,3,4,5]);//create select with default array 
SelectCode += CreateSelectFromArray ('ObjectsIDValue2', [1,2,3,4,5]);//create select with default array 
SelectCode += "<input id='TotalsIDValue'/>"; 

var doc = document.open("text/html","replace"); 
doc.writeln(SelectCode); 
doc.close() 

//Add events to the Selects for desired functionality 
document.getElementById("FirstSelect").onchange = function(){ 
                var e0 = document.getElementById("FirstSelect"); 
                ChangeSelectFromValues('ObjectsIDValue1',1,new Number(e0.options[e0.selectedIndex].value)); 
                }; 

document.getElementById("SecondSelect").onchange = function(){ 
                var e0 = document.getElementById("SecondSelect"); 
                ChangeSelectFromValues('ObjectsIDValue2',1,new Number(e0.options[e0.selectedIndex].value)); 
                }; 

document.getElementById("ObjectsIDValue1").onchange = function(){Total()}; 

document.getElementById("ObjectsIDValue2").onchange = function(){Total()}; 

</script> 

Это примерно так же чист, как вы можете получить это в обычном JavaScript

Примечание:

var doc = document.open("text/html","replace"); 
doc.writeln(SelectCode); 
doc.close() 

Может быть заменить,

document.getElementById("PlaceYouWantTheSelects").innerHTML =SelectCode; 

Если у вас есть определенное место в виду, чтобы поместить выборки.