Onchange下拉菜单

时间:2014-02-03 22:49:16

标签: javascript html

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

2 个答案:

答案 0 :(得分:0)

我个人建议使用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”的控制器绑定。通过分配ng-model="confirmed"复选框,它将同名的变量绑定到复选框。正如您可以看到几行,只需调用{{confirmed}}即可调用html中的值。此外,分配{{1元素基本上告诉控制器调用函数,change(),只要有问题的元素发生了变化。希望这有帮助)

答案 1 :(得分:0)

这是使用常规的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; 

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