選択したオプションの値を動的に取得して変数に格納する方法は？

Question

var temparr = []; 
 
var arrmain = [ 
 
    ["E1", "RAM", "CHENNAI", "COMP", "P1"], 
 
    ["E2", "RAJU", "PUNE", "ELECTRO", "P1"], 
 
    ["E3", "JOHN", "KOLKATA", "MECH", "P2"] 
 
    ["E4", "JOHN", "KOLKATA", "MECH", "P2"] 
 
]; 
 
var p_id; 
 
$(document).ready(function() { 
 

 
    $('#dropdown select').on('change', function() { 
 
    p_id = $('#dropdown select :selected').val(); 
 
    }); 
 

 

 

 

 
    for (var i = 0; i < temparr.length; i++) { 
 
    //creates option tag 
 
    $('<option/>', { 
 
     value: tempArray[i], 
 
     html: tempArray[i] 
 
    }).appendTo('#dropdown select'); 
 

 
    } 
 
});

<div id='dropdown'> 
 
    <select style="width:200px"> 
 

 
    </select> 
 
</div>

私は、オプションを変更したときに、私はオプション

を変更するたびに、私は変数にそのvlaueを得ることができる方法variable.soにその選択されたオプションの値を取得したい、今のアレイからオプションを取得しているドロップダウンを持ちます

Answer 1

あなたはほとんどそこにいます。 temparrの代わりにarrmain配列を反復処理する必要があります。

また、配列の配列にカンマがありません。

あなたがドロップダウン埋めるために changeを使用することができ、この

var temparr = []; 
 
var arrmain = [ 
 
    ["E1", "RAM", "CHENNAI", "COMP", "P1"], 
 
    ["E2", "RAJU", "PUNE", "ELECTRO", "P1"], 
 
    ["E3", "JOHN", "KOLKATA", "MECH", "P2"], 
 
    ["E4", "JOHN", "KOLKATA", "MECH", "P2"] 
 
]; 
 
var p_id; 
 
$(document).ready(function() { 
 

 
    $('#dropdown select').on('change', function() { 
 
    p_id = $('#dropdown select :selected').val(); 
 
    alert(p_id) 
 
    }); 
 

 

 
    for (var i = 0; i < arrmain.length; i++) { 
 

 
    
 
    $('<option/>', { 
 
     value: arrmain[i], 
 
     html: arrmain[i] 
 
    }).appendTo('#dropdown select'); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='dropdown'> 
 
    <select style="width:200px"> 
 

 
    </select> 
 
</div>

Answer 2

は異なり、この

var temparr = []; 
var arrmain = [ 
["E1", "RAM", "CHENNAI", "COMP", "P1"], 
["E2", "RAJU", "PUNE", "ELECTRO", "P1"], 
["E3", "JOHN", "KOLKATA", "MECH", "P2"] 
["E4", "JOHN", "KOLKATA", "MECH", "P2"] 
]; 
var p_id; 
$(document).ready(function() { 

    for (var i = 0; i < arrmain.length; i++) { 
     //creates option tag 
     $('<option/>', { 
      value: arrmain[i], 
      html: arrmain[i] 
     }).appendTo('#dropdown select'); 

    } 

    $('#dropdown select').on('change', function() { 

     p_id = $('#dropdown select').val(); 
     alert(p_id); 
    }); 


}); 

Answer 3

ビットのように、あなたのjavascriptのコードを変更してみてください。単にchangeに乗ってください。下記のコードを参照してください。

var temparr = []; 
 
var arrmain = [ 
 
    ["E1", "RAM", "CHENNAI", "COMP", "P1"], 
 
    ["E2", "RAJU", "PUNE", "ELECTRO", "P1"], 
 
    ["E3", "JOHN", "KOLKATA", "MECH", "P2"], 
 
    ["E4", "JOHN", "KOLKATA", "MECH", "P2"] 
 
]; 
 
var p_id; 
 
$(document).ready(function() { 
 

 
    $('#dropdown select').on('change', function() { 
 
    p_id = $('#dropdown select').val(); 
 
    alert(p_id) 
 
    }); 
 

 
$.each(arrmain,function(e,i){ 
 
     $('<option/>', { 
 
     value: i, 
 
     html: i 
 
    }).appendTo('#dropdown select'); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='dropdown'> 
 
    <select style="width:200px"> 
 

 
    </select> 
 
</div>

Answer 4

あなたのHTMLコード

<select id="dropdown"> 
     <option value="">---select---</option> 

</select> 

HTMLファイル内jQuery.jsファイルを追加しています。

jQueryの

$(function() { 

    var select = document.getElementById("dropdown"); 
    var options = [["E1", "RAM", "CHENNAI", "COMP", "P1"], 
        ["E2", "RAJU", "PUNE", "ELECTRO", "P1"], 
        ["E3", "JOHN", "KOLKATA", "MECH", "P2"], 
        ["E4", "JOHN", "KOLKATA", "MECH", "P2"]]; 
    for(var i = 0; i < options.length; i++) { 
     var opt = options[i]; 
     var el = document.createElement("option"); 
     el.textContent = opt; 
     el.value = opt; 
     select.appendChild(el); 
    } 

    $("#dropdown").change(function() { 
     var value = $(this).val(); 
     alert(value);    
    }); 
});