如何动态获取所选选项的值并将其存储到变量中?

时间:2017-01-13 05:32:51

标签: javascript jquery



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');

  }
});
&#13;
<div id='dropdown'>
  <select style="width:200px">

  </select>
</div>
&#13;
&#13;
&#13;

我有下拉列表,当我更改选项然后想要将选定的选项值变为变量时,现在从数组中获取选项。因此,无论何时我更改选项,我怎样才能将该值变为变量

4 个答案:

答案 0 :(得分:0)

你快到了。而不是temparr,您需要迭代arrmain数组。

您在数组数组中也缺少逗号。

试试这个

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>

答案 1 :(得分:0)

像这样更改你的javascript代码

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);
    });


});

答案 2 :(得分:0)

不同的是,您可以使用change填充下拉列表。然后继续change。见下面的代码。

&#13;
&#13;
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');
});
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您的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);             
    });
});