Javascript Onchange下拉菜单

当用户从下拉菜单中选择一个选项Select并将其与另一个下拉菜单的另一个选项相加并输出一个标记的总数时，我如何获取一个值？我想这个总数自动改变与变化的方法。我已经用JavaScript编写了我的代码，使用DOM来编写表单！你能帮我吗？

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

以下是关于如何使用AngularJs附带的ng change实用程序的文档：

---

编辑：我想我应该更详细地描述示例中发生的事情。基本上，的内部将绑定到script.js中名为controller的控制器。通过将ng model=confirm分配给复选框，它将一个同名变量绑定到复选框。正如下面几行所示，只需调用{{confirm}}即可从html调用值。此外，将ng change=change分配给元素基本上会告诉控制器在对相关元素进行更改时调用函数change。希望这有帮助这是使用常规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
};

只需在定义总数后再加上

Edit3：我想直截了当地解释一下，在常规Javascript中，您想要做的事情非常难看。我建议使用JQuery这样的JS库，这样做更干净，更容易编写代码

无论如何，这里是所有需要做这件事的代码

<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>

可以用,

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

---

如果您想在某个特定位置放置选择项。

是。也许对我来说，使用这个解决方案更直观，而且看起来也很简单。如果OP愿意使用Angular来解决一个dom问题，那么这是一个很好的解决方案。是的，但我的问题是使用on change方法，以及在用户选择后如何获得选项？@user3238361查看我的答案和示例。我认为它解释了你的问题所需要的一切。你说你已经编写了代码，但你没有在你的问题中添加任何代码。是的，但有一个问题。我希望您在html中所做的选择和选项部分在JavaScript中完成并使用它们。@user3238361查看一下Edit2，我想这就是您要找的。@user3238361当我再次阅读您的评论时，我想您是否希望JS也构建选择结构？这是可能的，但我不确定这是您想要的。@user3238361所以这需要一些修补，这不是我感到自豪的事情，但您要求只使用JavaScript来创建它。我想指出的是，尽管这可以满足您的需求，但我还是建议您使用JS库和一个模板HTML表单作为开始，并在必要时进行填充。

<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>

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

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