Javascript 如何使用JS动态更新innerHTML_Javascript

Javascript 如何使用JS动态更新innerHTML

javascript

Javascript 如何使用JS动态更新innerHTML,javascript,Javascript,我有一个下拉框，每个选项有2个值。我想根据选择动态更新HTML中的值。必须显示的值来自下拉框值。这是我的代码，但这里似乎什么都没有发生 <html> <head><title></title> <script type="text/javascript"> var a = new Array(); a[1] = "kgs"; a[2] = "gms"; a[3] = "ltrs"; a[4] = "ml";

我有一个下拉框，每个选项有2个值。我想根据选择动态更新HTML中的值。必须显示的值来自下拉框值。这是我的代码，但这里似乎什么都没有发生

<html>

    <head><title></title>

    <script type="text/javascript">

var a = new Array();
a[1] = "kgs"; 
a[2] = "gms"; 
a[3] = "ltrs"; 
a[4] = "ml"; 
a[5] = "nos"; 

window.onload = function() {

function updateunit(){

var b = document.getElementById("itemname");

var b1 = b.options[b.selectedIndex].value;

var c = b1.split(',');

var d = c[1];

var e = a[d];

alert(document.write(a[1]));

document.getElementById('pane2').innerHTML = b1 ;

}



updateunit()

document.getElementById('itemname').onchange = updateunit ;

}    

</script></head>


<body>

<form action='production.php' method="POST"> 

Item Name <select name ="itemname" id = "itemname">
<option value = '1,5' > A </option>
<option value = '2,5' > B </option>
<option value = '3,5' > C </option>
<option value = '4,5' > D </option>
</select> <br>



Amount <input type="text" name="amount"> <span id = "pane2"></span> <br>

</form>        

</body>

</html>


var a=新数组（）；
a[1]=“千克”；
a[2]=“gms”；
a[3]=“ltrs”；
a[4]=“ml”；
a[5]=“否”；
window.onload=函数（）{
函数updateunit（）{
var b=document.getElementById（“itemname”）；
var b1=b.options[b.selectedIndex]。值；
var c=b1.分割（'，'）；
var d=c[1]；
var e=a[d]；
警报（document.write（a[1]））；
document.getElementById（'pane2'）。innerHTML=b1；
}
updateunit（）
document.getElementById（'itemname'）。onchange=updateunit；
}    
项目名称
A.
B
C
D


金额

检查代码语法它应该是

selectedIndex

plz使用这个--

警报（a[1]）并让我知道它是否工作
    var a = new Array();
    a[1] = 'kgs'; 
    a[2] = 'gms'; 
    a[3] = 'ltrs'; 
    a[4] = 'ml'; 
    a[5] = 'nos'; 

    window.onload = function() {

    function updateunit(){

    var b = document.getElementById("itemname");

var b1 = b.options[b.selectedIndex].value;

新编辑
这是我在xampp->htdocs下以name.php的形式保存的代码，代码如下，我在浏览器中以--localhost/name.php的形式进行了测试
<?php
/*
I have a drop down box, each option in it has 2 values. I want to dynamically update value in my HTML based on the selection. The value that has to be shown is derived from drop down box values. Here is my code, but nothing seems to be happening here. 
*/
?>

    <html>

        <head><title></title>

        <script type="text/javascript">

    var a = new Array();
    a[1] = 'kgs'; 
    a[2] = 'gms'; 
    a[3] = 'ltrs'; 
    a[4] = 'ml'; 
    a[5] = 'nos'; 

    window.onload = function() {

    function updateunit(){

    var b = document.getElementById("itemname");

    var b1 = b.options[b.selectedIndex].value;

    var c = b1.split(',');

    var d = c[1];

    var e = a[d];

    alert(a[1]);

    document.getElementById('pane2').innerHTML = b1 ;

    }



    updateunit()

    document.getElementById('itemname').onchange = updateunit ;

    }    

    </script></head>


    <body>

    <form action='production.php' method="POST"> 

    Item Name <select name ="itemname" id = "itemname">
    <option value = '1,5' > A </option>
    <option value = '2,5' > B </option>
    <option value = '3,5' > C </option>
    <option value = '4,5' > D </option>
    </select> <br>



    Amount <input type="text" name="amount"> <span id = "pane2"></span> <br>

    </form>        

    </body>

    </html>


var a=新数组（）；
a[1]＝‘kgs’；
a[2]=“gms”；
a[3]=“ltrs”；
a[4]=“ml”；
a[5]=“否”；
window.onload=函数（）{
函数updateunit（）{
var b=document.getElementById（“itemname”）；
var b1=b.options[b.selectedIndex]。值；
var c=b1.分割（'，'）；
var d=c[1]；
var e=a[d]；
警报（a[1]）；
document.getElementById（'pane2'）。innerHTML=b1；
}
updateunit（）
document.getElementById（'itemname'）。onchange=updateunit；
}    
项目名称
A.
B
C
D


金额

而不是：
document.getElementById('pane2').innerHTML = b1 ;

使用：
参考：
我希望您正在努力实现这一目标
要获取所选下拉列表的值，只需elem.value
将updateunit函数作为全局函数，而不是在window.onload函数中
数组以索引0开头。所以当拆分时，不要说c[1]，它将始终给你5，从c[0]中得到值
什么是kgs

gms

ltrs

ml

号

？你必须定义它们。您的代码无法工作是因为在开始时出现错误，而不是因为它不工作。顺便说一句，请熟悉JSFIDLE:）它很有用它们是字符串..通过放置qoutes来更新它。还是什么都没有发生@user1545024再次检查您的代码——它的selectedindex不是selectedindex，另一个东西是alert（a[1]）@user1545024检查im更新我的答案这是Jquery，请不要将js与Jquery混淆

document.getElementById('pane2').innerHTML = b1 ;

document.getElementById('pane2').html(b1);

var a = ["kgs", "gms", "ltrs", "ml", "nos"];
window.onload = function() {
    updateunit();
    document.getElementById('itemname').onchange = updateunit;
}
function updateunit(evt) {
    var b1 = evt.target.value;
    if(b1) {
        var d = b1.split(',')[1];
        var e = a[d - 1];
        document.getElementById('pane2').innerHTML = e ;
    }  

}