onchange function

Question

I am trying to create a function to run when a select option is changed. In my select menu i have;

    <form id="frame">
       <select id="frame_color" onchange="fChange()">
           <option value="0">Polished Black</option>
           <option value="1">Grey</option>
       </select>
     </form>

The only thing that I want the fChange() function to do is update the variable that is holding the options value with the onchange value. So, the variable in the function fChange starts off by holding the value "0", and when I change it to "Grey" I want the variable to update to "1". I am having a hard time figuring out how to code the function properly. Any suggestions?

Answer 1

following get the selected option value...

function fChange()
{
  var val = $("#frame_color").val();
}

Answer 2

fChange = function(){
    var value = document.getElementById("frame_color").value;
    alert(value);
}

Answer 3

on jQuery:

$(function(){
    $('#frame_color').on('change',function(){
        your_variable = $(this).val()
    });
});

for non-jQuery, a quick way to do it is:

document.getElementById('frame_color').onchange = function(e){
    your_variable = e.target.value;
}​

also, you might want to look at addEventListener for standards-compliant browsers, and attachEvent for IE6-8

Answer 4

try this, which is jQuery

<script type="text/javascript">

    $(document).ready(function () {
               $('#frame_color').change(function(){
                     // your code should be here
               });
        });

</script>

Answer 5

var variable = 0;
function fChange()
{
var val = document.getElementById("frame_color").value;
variable = val;
}



<form id="frame">
       <select id="frame_color" onchange="fChange()">
           <option value="0">Polished Black</option>
           <option value="1">Grey</option>
       </select>
     </form>