Question

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

Answer 1

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

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

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

（编辑：我想我应该更详细地描述一下示例中发生的事情。基本上，<div ng-controller="Controller">内部的内容将与script.js中名为“Controller”的控制器绑定。通过分配ng-model="confirmed"复选框，它将同名的变量绑定到复选框。正如您可以看到几行，只需调用{{confirmed}}即可调用html中的值。此外，分配{{1元素基本上告诉控制器调用函数，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（）;

后添加

编辑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;

如果您有一个特定的位置来选择。

Onchange下拉菜单

2 个答案: