イベントの変更値コンボボックスJavaScript JSP

Question

ComboBoxの値を変更した後、JavaScriptの値を変更したいと思います。しかし、それはここでは、動作しませんでした私のコードは次のとおりです。

<script>var selGate = "empty"</script> 
    <SELECT NAME = "cmbGate" STYLE ="width: 600px" SIZE = 15 onchange="chGate()"> 
    <OPTION Value = "opt1">Option 1</OPTION> 
    <OPTION Value = "opt2">Option 2</OPTION> 
    </SELECT>      
    <BR> 
    <form name="frGate"> 
    Selected Gate is: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
    <script>document.write(selGate)</script> 
    </form> 
      <script> 
       function chGate() 
       { 
        selGate = document.getElementsByName("cmbGate").selectorText; 
        frGate.submit(); 
       } 
      </script>     

Answer 1

あなたの関数は次のようになります。

function chGate() 
{ 
    var e = document.getElementById("cmbGate");//get the combobox 
    var selGate = e.options[e.selectedIndex].value;//get selected value 
    //you can also do use     ^.text =>to get the text instead 
    document.getElementById("selected").innerHTML = "Selected Gate is:"+selGate; 
            //^^ set the text to the selected value 
    frGate.submit(); 
} 

あなたは、HTMLは次のように変更する必要があります。

==>選択を変更

<SELECT id="cmbGate" STYLE ="width: 600px" SIZE = 15 onchange="chGate()"> 
//  ^^ set the id 

==>フォームを変更し

<form name="frGate"> 
    <div id="selected">Selected Gate is:</div> 
    // ^^ set an id here also so you can update it 
</form> 

作業のデモを参照してください：あなたのコードで問題の多くは、主に起因する、それはすべてのそれの代わりと半分以上だがあらゆるイベントにバインドされていないという事実のために、あります http://jsfiddle.net/Mr2CF/2/

Answer 2

を。

<script type="text/javascript"> 
    var selGate = 'empty'; 
    document.getElementById('cmbGate').onchange = function() { 
    selGate = this.options[this.selectedIndex].text 
    document.getElementById('selectedGate').innerHTML = selGate; 
    } 
</script> 

<select id="cmbGate" name="cmbGate" style="width: 600px" size="15"> 
    <option value="opt1">Option 1</option> 
    <option value="opt2">Option 2</option> 
</select> 
<br> 
<form name="frGate" id="frGate"> 
    <p>Selected gate is: <span id="selectedGate"></span></p> 
</form> 

がアクションhereでこれを参照してください：あなたが本当にしたいことは、このようなものです。