Question

我遇到问题从这个脚本上的javascript接收超过8个值...它应该自动填充下拉选项（选择）上的字段，它确实正常工作，但我不能获得超过8个值..问题出在哪里？谢谢！

<script type="text/javascript">
    // Format of StoreDetails()
    // Name,Addr1,Addr2,Addr3,Phone,FAX,Email,Webpage, Url
    var StoreDetails = [
        ['Please select','','','','','','','',''],
        ['Please select','test1','test2','test3','test4','test5','test6','test7','test8']
        // Note: no comma
    ];
    function Setup(TA) {
        var str = "<select id='Store' class='styled-select' onchange='StoreInfo()'>";
        for (var i=0; i<StoreDetails.length; i++) {
            str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i]   [0]+'</option>';
        }
        str +='</select>';
        document.write(str);
    }
    function StoreInfo() {
        var sel = document.getElementById('Store').selectedIndex;
        var tmp = [];  tmp.push(sel);
        for (var i=1; i<8; i++) { 
            tmp.push(StoreDetails[sel][i]); 
        }
        document.getElementById('txtName').value = tmp[1];
        document.getElementById('txtAddr1').value = tmp[2];
        document.getElementById('txtAddr2').value = tmp[3];
        document.getElementById('txtAddr3').value = tmp[4];
        document.getElementById('txtPhone').value = tmp[5];
        document.getElementById('txtPhone2').value = tmp[6];
        document.getElementById('txtEmail').value = tmp[7];
        document.getElementById('txtWebpage').value = tmp[8];
        document.getElementById('txtUrl').value = tmp[9];
    }
</script>
</head>
<body>
    <div class="container">     
       <header class="clearfix">            
          <img src="logo.png"/>
          <nav class="codrops-demos">
             <a class="current-demo" href="index.php">Some text</a>
          </nav>                
       </header>
       <section class="main clearfix">
           <div class="fleft">
               <p>Da bi porucili vizit karte, izaberite ime i kolicinu, zatim potvrdite.</p>
           </div>
           <div class="fleft">
           <form id="testconfirmJQ" name="testconfirmJQ" method="post" action="output.php">
<script type="text/javascript">Setup();</script>
    <table border="0">
       <input type="text"  hidden="hidden"  id="txtName" name="txtName" size="30" value="">    </td></tr>
       <input type="text"  hidden="hidden" id="txtAddr1" name="txtAddr1"  size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtAddr2" name="txtAddr2" size="30" value=""></td></tr>
       <input type="text"  hidden="hidden" id="txtAddr3" name="txtAddr3" size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtPhone" name="txtAddr3" size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtPhone2" name="txtPhone2" size="30" value=""></td></tr>
       <input type="text"  hidden="hidden" id="txtEmail" name="txtEmail" size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtUrl" name="txtUrl" size="30" value=""></td> </tr>
     <tr><td>How much?:</td><td><input type="text" id="kolicina" name="kolicina" size="5"  value=""></td></tr>
     <tr><td><input id="submitJQ" name="submitJQ" type="submit" class="styled-button-1"   value="Confirm" /></td></tr>
     </table>
</form>

Answer 1

您在for循环中限制tmp的大小（范围从i = 1到i < 8）。一些变化：

var StoreDetails = [
    ['A store','test1','test2','test3','test4','test5','test6','test7','test8','url']
    // Note: no comma
];

function Setup() {
    var str = "<select id='Store' class='styled-select' onchange='StoreInfo()'>";

    str += '<option disabled="disabled" selected="selected">Please Select</option>';

    for (var i=0; i<StoreDetails.length; i++) {
        str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i]   [0]+'</option>';
    }

    str +='</select>';

    document.write(str);
}

function StoreInfo() {
    var sel = document.getElementById('Store').value;

    var values = sel.split("|");

    document.getElementById('txtName').value = values[1];
    document.getElementById('txtAddr1').value = values[2];
    document.getElementById('txtAddr2').value = values[3];
    document.getElementById('txtAddr3').value = values[4];
    document.getElementById('txtPhone').value = values[5];
    document.getElementById('txtPhone2').value = values[6];
    document.getElementById('txtEmail').value = values[7];
    document.getElementById('txtWebpage').value = values[8];
    document.getElementById('txtUrl').value = values[9];
}

Setup();

......以及表格：

<form>
    <input id="txtName" />
    <input id="txtAddr1" />
    <input id="txtAddr2" />
    <input id="txtAddr3" />
    <input id="txtPhone" />
    <input id="txtPhone2" />
    <input id="txtEmail" />
    <input id="txtWebpage" />
    <input id="txtUrl" />
</form>

此代码is working in my environment。

Answer 2

在第8个var

document.getElementById('txtWebpage').value = values[8];

但是没有名为“txtWebpage”的元素，所以当它到达时：

document.getElementById('txtUrl').value = values[9];

它未定义。

而不是使用值8来计算，我会使用：

StoreDetails[sel].length

javascript中的变量，自动填充表单

2 个答案: