堆棧內存溢出
  簡體   English   中英

JavaScript-從下拉框中讀取

[英]JavaScript - Reading from dropdown box

 原文  2012-03-28 13:45:56  7   2    javascript/ drop-down-menu

問題描述

我需要能夠從頁面上的下拉框中讀取值，並從中獲取值，這就是目前為止的代碼。

JavaScript的 

function main(input)
{
    value = getValue();
    alert(value);
}

function getValue()
{
    var len = document.form1.values.length
    var chosen = ""

    for (var i = 0; i < len; i++) {
        if (document.form1.values[i].selected) {
            chosen = document.form1.values[i].value
        } 
    }

return chosen;
}

HTML 

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Shopping Cart</title>
        <link href="style.css" title="Style" rel="stylesheet" type="text/css">
        <script src="javascript/js.js" type="text/javascript"></script>
    </head>

    <!-- Start content -->
    <body>
        <!-- Wrapper to hold all content in -->
        <div id="wrapper">
            <!-- Top header, site name, moto, all that -->
            <div id="header">
                <h1>Kyle's Legit Toys</h1>
                <h2>We are more legit then 10th.exe</h2>
                <h3>#SoundsLegit</h3>
            </div>

            <!-- Navigation Menu -->
            <div id="menu">
                <a href="#">Home</a>
                <a href="http://itsuite.it.brighton.ac.uk/ks339/sem2/clientValidation.htm">Client Validation</a>
            </div>

            <!-- Item -->
            <div class="first">
                <p>Wickedy Walker</p>
                <img src="i/car.jpg" width="85%" height="85%" alt="Car" title="#CoolCar">
                <p>Cost: £30 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Faster than light car</p>
                <img src="i/toycar.jpg" width="85%" height="85%" alt="ToyCar" title="#WickCar">
                <p>Cost: £10 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Build stuff crane</p>
                <img src="i/crane.jpg" width="85%" height="85%" alt="Toy Crane" title="#SweetCrane">
                <p>Cost: £15 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Dynamicaly altered payment -->
            <div id="payment">
                <p>Payment</p>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>

            <!-- Clear all floats -->
            <div class="clear">
            </div>

            <!-- Item -->
            <div class="first">
                <p>Satch Boogie</p>
                <img src="i/guitar.jpg" width="85%" height="85%" alt="Guitar" title="#BeLikeSlash">
                <p>Cost: £20 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>HaxTop</p>
                <img src="i/laptop.jpg" width="85%" height="85%" alt="Laptop" title="#Be1337hax">
                <p>Cost: £150 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Train</p>
                <img src="i/train.jpg" width="85%" height="85%" alt="Train" title="#ChoChoTrain">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Clear all floats -->
            <div class="clear">
            </div>

            <!-- Item -->
            <div class="first">
                <p>Pedo Bear</p>
                <img src="i/teddybear.gif" width="85%" height="85%" alt="Teddy Bear" title="#AwesomeTeddy">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Not a pony bear</p>
                <img src="i/bear.jpg" width="85%" height="85%" alt="Teddy Bear" title="#EnvyOfHomies">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Item -->
            <div class="item">
                <p>Patobo Bear</p>
                <img src="i/irl.jpg" width="85%" height="85%" alt="Teddy Bear" title="#NotEvenRacist">
                <p>Cost: £5 per item</p>

                <form name="form1" method="POST">
                    <select name="values" onchange="main()" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </form>
            </div>

            <!-- Clear all floats -->
            <div class="clear">
            </div>

            <!-- Final footer -->
            <div id="footer">
                <p>Kyle Strudwick - ks339 - StudentNumber</p>
                <p>Some copyright stuff</p>
            </div>
        </div>
    </body>
</html>

鍍鉻錯誤

我在Chrome中得到的錯誤

螢火 螢火螢火

非常感謝，回答時請嘗試解釋我做錯了什么，為什么做錯了以及正確的方法。

謝謝

2 個解決方案

解決方案1
 3 已采納  2012-03-28 13:52:03

將您的HTML更改為： 

<select name="values" onchange="main(this)" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
</select>

並且您可以執行以下操作： 

function main(input)
{
    var text = input.options[input.selectedIndex].text; // returns the text ie one / two etc
    var value = input.value; // returns the value ie 1 / 2 / 3 etc
}

我已更改的內容 -我已將onchange從main()更新為main(this)這意味着將當前select列表對象傳遞給main -這使得訪問從功能更改的實際select列表變得更加容易-您不必在DOM中搜索已更改的選擇列表。

javascript的作用是什么 -簡化了選擇選項的過程，現在我們傳遞了已更改的實際select列表，即input =正確的選擇列表。 我們可以使用input.selectedIndex獲取當前選擇的選項，使用input.value返回當前選擇的值

使用document.forms1無法正常工作，因為您的頁面上有多個名為form1表單-使用document.forms1[#]其中#是表單的索引可以使用，但令人困惑...

進一步的更改 -如果您完全按照問題的方式使用表格，則可以刪除其中的一種表格，因為它們實際上什么也沒做...只需用一個表格將整個頁面（只是內容）括起來-使用上面的獲取更改后的值的方法仍然有效，因為它不依賴於表單！

這是上述工作的簡單示例

解決方案2
 1  2012-03-28 13:54:52

您所有表單的名稱都為form1，因此document.form1實際上會返回一個<form>元素數組。 您可以單獨訪問它們，例如第一個表單的document.form1[0].values 。 要維護通用函數，您需要將當前的select元素（觸發onchange事件的元素）傳遞給函數，以便您的函數找到正確的form1進行操作。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript中的文本框從下拉列表 JavaScript從下拉框中添加元素 從文本框中讀取文本並將其設置在 html #html #javascript 的下拉菜單中 使用數字值從JavaScript的下拉框中選擇項目 使用帶有來自數據庫的值的下拉框添加新行使用javascript？ Javascript-將值從下拉框中傳遞到Google Maps API Javascript-使用按鈕從下拉/選擇框中輸出設置的字符串值 如何阻止 Javascript 菜單下划線進入下拉框？ 從下拉列表或組合框中設置“選定的” Javascript 從下拉框中選擇
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM