javascript - 選択値を JS 関数に送信する

Question

HTML の次のメニューがあります。

<select name="p1">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

今、私はそれを私のJS関数に送りたいです:

function myFunc(menuValue){
//do something
}

どうすればいいですか？

Answer 1

このようなもの ：

Javascript :

var selectObj = document.querySelector("#selectID"),
    displayObj = document.querySelector(".display");
selectObj.onchange = function(evt){
    myFunc(this.value);
}

function myFunc(menuValue){
    displayObj.innerHTML = menuValue; 
}

HTML :

<select id = "selectID" name="p1">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<div class='display'></div>

http://jsfiddle.net/NeekGerd/4H5aq/

Answer 2

それで、オプション値の選択されたオプションの値を取得したいonchangeですか？この方法を試すことができます：-

http://jsfiddle.net/T8CKU/

<select name="p1" onchange="myfunc(this.value);">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

function myFunc(menuValue){
    alert(menuValue)
}

ここで myFunc 内では、`this のコンテキストはウィンドウになります。ウィンドウ内のコンテキストをドロップダウン自体として取得する場合は、apply または call を使用できます。

<select name="p1" onchange="myFunc.call(this);">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

function myFunc(){
    alert(this.value); //This will give the value again.
}

Answer 3

HTML の select 要素はonchange、新しい値 (new = 選択されていないオプション) を選択した場合に発生するイベントを提供します。

<select name="p1" onchange="myFunc(option);">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

function myFunc(option) {
  // whatever you need to do
};