JavaScript - ドロップダウンボックスから読み取る

ページのドロップダウンボックスから読み取ることができ、それから値を取得する必要があります（今のところ）私は現在このコードを持っています。JavaScript - ドロップダウンボックスから読み取る

は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>

クロームでエラーが発生しました

The error I get in chrome

Firebugの Firebug Firebug

お返事ありがとうございました。私が間違っていたことを説明してください、どうしてそれが間違っていて、正しい方法を説明してください。

おかげ

出典

2012-03-28 Kyle93

+1完璧な質問は - すべてのコードを含んでおり、最適化されたJavaScriptのデバッグ – ManseUK

はこれにあなたの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 
}

私はを変更している何を - 私はにmain()からonchangeを更新しましたmain(this)この変更は、現在の値を渡すことを意味しますselectリストオブジェクトをmainファンクションに追加すると、実際のselectリストにアクセスするのが簡単になります。変更された選択リストのDOMを検索する必要はありません。

Javascriptをがそう何 - これが選択されたオプションを取得するプロセスを簡素化し、今はすなわちinput =正しい選択リスト変更された実際のselectリストを渡されます。 #が希望の形式の指標であるdocument.forms1[#]を使用して - 私たちはあなたのページの名前form1を持つ複数のフォームを持つbecuase作業document.forms1波平を使用して、現在選択されている値

を返すために、現在選択されているオプションとinput.valueを取得するためにinput.selectedIndexを使用することができます仕事が、その混乱...

さらに変化 - 彼らは本当に何もしないされているよう...ちょうど囲む - あなたがあなたの疑問を持っているとおりに、それを使用している場合は、フォームのうちの1つを除くすべてを削除することができ単一のフォームでページ全体（コンテンツのみ） - 上記の方法を使用して変更された値を取得するそれはフォームに依存していないので動作します！

Here is a quick example of the above working

出典

2012-03-28 13:52:03 ManseUK

+1を実証した（そして、それを私に暴行） – andyb

パーフェクト！どうもありがとう。説明素敵なシンプルなグッド。再度、感謝します。応答のための – Kyle93

すべてのフォームは、名前のでdocument.form1実際<form>要素の配列を返します、Form1を持っています。個別にアクセスすることができます（例：document.form1[0].values）。汎用関数を維持するには、の選択要素（onchangeイベントが発生した要素）を関数に渡す必要があります。これにより、関数が正しい形式1を処理するようになります。

出典

2012-03-28 13:54:52 andyb

おかげで、しかし、あなたは彼のポストに言ったように、それは良いことです。おかげで再びカントー – Kyle93

JavaScript - ドロップダウンボックスから読み取る

答えて

関連する問題