Onchange 下拉菜单

Question

当用户从下拉菜单（选择）中选择一个选项并将其与另一个下拉菜单的另一个选项一起添加并输出总分时，我如何获取一个值？我希望这个总数通过 on-change 方法自动改变。我已经使用 DOM 在 JavaScript 中编写了代码来编写表单！你能帮帮我吗？

Answer 1

我个人建议用 AngularJs 来做这件事。如果您使用的是 Angular，只需为 DOM 元素分配模型（ng-model）名称，您就可以在 javascript 中动态更改下拉列表中的项目。看看这个非常简单的例子：

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

这里是关于如何使用 AngularJs 附带的 ng-change 实用程序的文档：

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

（编辑：我想我应该更详细地描述示例中发生的事情。基本上，<div ng-controller="Controller"> 内部的内容将与 script.js 中名为“Controller”的控制器相关联。通过分配 @987654324 @ 到复选框，它将同名的变量绑定到复选框。正如您在下面看到的几行，只需调用 {{confirmed}} 即可从 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>

注意：这并不能验证您选择的内容是数字。

编辑：由于您似乎是 Stack Overflow 上的新手，我想提一下，如果您发现这解决了您的问题，请通过勾选标记将其标记为已接受的答案。此外，如果您觉得这很有帮助并且有足够的积分可以投票，请也这样做。

希望这会有所帮助。

Edit2：根据 OP 的评论，我认为您正在寻找这个，

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

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

只需在定义 Total() 后添加即可；

Edit3：我想坦率地解释一下，您想要做的事情在常规 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; 

如果你有一个特定的地方来放置选择。