Question

我有一个下拉框，其中的每个选项都有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>

Answer 1

我希望你试图实现这一目标。 http://jsfiddle.net/nsjithin/SbtSF/

要获取所选下拉列表的值，您只需要elem.value
将updateunit函数设置为global，而不是window.onload函数。
数组从索引0开始。所以当分割不说c [1]时，它总是给你5，从c [0]得到值。

Answer 2

Javascript is case sensitive

检查代码语法应该是selectedIndex -

并且plz使用此 - alert(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-＆gt; 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>

Answer 3

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

}

Answer 4

而不是：

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

使用：

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

参考： http://api.jquery.com/html/

如何使用JS动态更新innerHTML

4 个答案: