0

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

4 回答 4

1

我希望你正在努力实现这一目标。http://jsfiddle.net/nsjithin/SbtSF/

  1. 要获取所选下拉列表的值，您只需要 elem.value
  2. 将 updateunit 函数作为全局函数，而不是在 window.onload 函数中。
  3. 数组从索引 0 开始。所以在拆分时不要说 c[1]，它总是会给你 5，从 c[0] 中获取值。
于 2012-07-23T06:15:25.420 回答
0 
Javascript is case sensitive

检查代码语法应该是selectedIndex——

并请使用它——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->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>
于 2012-07-23T06:07:34.643 回答
0 
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 ;
    }  

}
于 2013-12-16T11:09:44.997 回答
-2

代替 ：

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

利用 ：

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

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

于 2012-07-23T06:08:26.623 回答