web-dev-qa-db-ja.com

HTML selectのonChangeでパラメータを渡す方法

私はJavaScriptとjQueryの初心者です。一つのコンボボックス-Aを見せたいのですが、それはHTMLの<select>であり、その選択されたidと内容はonChange（）の他の場所にあります。

Select idを使って完全なコンボボックスを渡す方法と、onChangeイベントの発生時に他のパラメータを渡す方法を教えてください。

javascriptjqueryhtmlcomboboxonchange
163
Gendaful
function getComboA(selectObject) {
    var value = selectObject.value;  
}

<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

上記の例では、 OnChange イベントでコンボボックスの選択された値を取得します。

312
Piyush Mattoo

状況によっては便利なもう1つの方法は、選択した<option />の値を次のような関数に直接渡すことです。

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>
41
Cazuma Nii Cavalcanti

JQueryでそれを行う方法については：

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

あなたはJavascriptとjQueryが同一ではないことも知っておくべきです。 jQueryは有効なJavaScriptコードですが、すべてのJavaScriptがjQueryであるとは限りません。違いを調べて、適切なものを使用していることを確認してください。

31
aiham

私は@ Piyushの答えが役に立つことを見つけました、そしてあなたがプログラム的に選択を作成するならば、それに加えて、それから明白でないかもしれないこの振る舞いを得るための重要な方法があります。関数があり、新しいselectを作成したとしましょう。

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

通常の動作は次のようになります。

newSelect.onchange = changeitem;

しかし、これは実際には渡された引数を指定することを許可していないので、代わりにこれを行うことができます。

newSelect.setAttribute('onchange', 'changeitem(this)');

そしてあなたはパラメータを設定することができます。もしあなたがそれを最初のやり方でやれば、あなたのonchange関数への引数はブラウザに依存するでしょう。 2番目の方法はクロスブラウザでうまく動作するようです。

5
Michael Plautz

jQueryソリューション

選択したオプションのテキスト値を取得する方法

選択要素には通常、アクセスしたい2つの値があります。
まず、サーバーに送信される値があります。これは簡単です。

$( "#myselect" ).val();
// => 1

2番目はselectのテキスト値です。
たとえば、次の選択ボックスを使用します。

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

最初のオプションが選択されている場合に（単に "1"ではなく） "Mr"という文字列を取得する場合は、次のようにします。

$( "#myselect option:selected" ).text();
// => "Mr"

また見なさい

5
Aniket Kulkarni

これは私にとって助けになります。

選択の場合：

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

ラジオ/チェックボックスの場合：

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});
4
ilgam

あなたは以下のコードを試すことができます

<select onchange="myfunction($(this).val())" id="myId">
    </select>
3
feyyaz acet

JavaScriptソリューション

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

または

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

または

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>
1
RobertKim

これは私にとってはうまくいきましたonchange = "setLocation（$（this）.val（））"

ここに..

@ Html.DropDownList（ "デモ"、新しいSelectList（ViewBag.locs、 "Value"、 "Text"）、new {Class = "ddlStyle"、onchange = "setLocation（$（this）.val（））"}） ;

0
Deepak Singla

このコードは一度onChangeイベントの説明を書くためだけに書いたもので、このコードをhtmlとして保存することができます。

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>
0
Piyush