3

I want to get dynamically the value of a select tag in my form. I do this actually

<select name="media_types_id" id="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<script>
    var option = $("#type option:selected").val();
    console.log(option);
</script>

but this return the value of the option selected and it doesn't change when I change the option in my form. i select 1 and if I select 2 after it stays at value 1...

KeizerBridge
  • 2,707
  • 7
  • 24
  • 37

5 Answers5

3

Bind change event to your <select> element and use its value:

$("#type").on("change", function() {
    var option = this.value;
    console.log(option);
});

Also note that event binding should be done when the DOM is loaded, so either place this code right before </body> or use $(function() { }); handler.

VisioN
  • 143,310
  • 32
  • 282
  • 281
3

Try Following use change() event to get the selected value of a drop down list 

$("#type").on("change",function(){
        var Option = this.val();
        console.log(Option);

});
Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
3

but your code runs globally. so for the first time , when page loads 1 is the selected value.

try your code inside change event

i.e.

$('#type').on("change",function(){
    var option = $("option:selected",this).val();
    console.log(option);
});
2

You need to bind change event to your select list:

<script>
  $(function() {
     $("#type").change(function() {
     console.log($(this).val());
    });
 });
</script>
freshbm
  • 5,540
  • 5
  • 46
  • 75
1

Use event handlers.

Event handlers call a function every time something happens.

Pure JS

var option = document.getElementById("type").value;
document.getElementById("type").onchange = function(e) {
    option = this.value;
}

Example: http://jsfiddle.net/howderek/FnT9T/3/

Community
  • 1
  • 1
howderek
  • 2,224
  • 14
  • 23