CODEWITHSUNDEEP
javascriptjqueryhtml
Andoni Da Silva
Andoni Da Silva

Reputation: 1341

Getting undefined value in jQuery select

I need to get a value from select HTML in order to copare with Integer values and take an action or another. The problem is that I am always getting undefined value from select and then, I can not compare undefined with Integer, thanks.

Code: 

var toRet
$(document).ready(function(){
  $('#id_event_type').on('change', function() {
    toRet = $('#id_event_type :selected').val(); //:selected is not necesary I think
    alert($(toRet).val());//returns undefined

   });
});
if (toRet == 2){
    var eventIcon = new OpenLayers.Icon('/stati/img/accidente.png',eventSize, eventOffset);
}
if (toRet == 0){
    var eventIcon = new OpenLayers.Icon('/static/img/obrasMarker.png', eventSize, eventOffset);
}
if (toRet == 1){
   var eventIcon = new OpenLayers.Icon('/static/img/alertMarker.png', eventSize, eventOffset);
}
if (toRet == ""){
   var eventIcon = new OpenLayers.Icon('/static/img/alertMarker.png', eventSize, eventOffset);
}
eventMarkerslayer.addMarker(new OpenLayers.Marker(eventPosition, eventIcon));

Code updated:

toRet = null;
//var selector = document.getElementById("id_event_type")
//var valorSeleccionado = selector.options[selector.selectedIndex].value;
$(document).ready(function(){           
  slc = $('#id_event_type');

  slc.on('change', function(){

    toRet = parseInt(slc.find(":selected").val(), 10);//here is ok!

   });
    //from here toRet is null                       
   if (toRet == 2){
     var eventIcon = new OpenLayers.Icon('/static/img/accidente.png', eventSize, eventOffset);
   }
  if (toRet == 0){
    var eventIcon = new OpenLayers.Icon('/static/img/obrasMarker.png',   eventSize, eventOffset);
  }
  if (toRet == 1){
    var eventIcon = new OpenLayers.Icon('/static/img/atascoMarker.png', eventSize, eventOffset);
  }

  eventMarkerslayer.addMarker(new OpenLayers.Marker(eventPosition,   eventIcon));
  eventMarkerslayer.setVisibility(false);
  $( "#visibilityEvents" ).change(function() {
      if ($('#visibilityEvents').is(":checked")) {
          eventMarkerslayer.setVisibility(true);
      } else {
          eventMarkerslayer.setVisibility(false);
      }
  });
});

HTML:

<select id="id_event_type" name="event_type" required="">
  <option value="" selected="selected">---------</option>
  <option value="0">Obras en la carretera</option>
  <option value="1">Congestion del trafico</option>
  <option value="2">Accidente</option>
</select>

Upvotes: 2

Views: 5691

Answers (7)

G_real
G_real

Reputation: 1157

Try to get the selected value by select field Name instead of ID as below.

$(document).ready(function(){
  $( "#submit" ).click(function() {
     alert($("select[name=id_event_type]").val());
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="id_event_type" name="id_event_type" required="">
  <option value="" selected="selected">---------</option>
  <option value="0">Obras en la carretera</option>
  <option value="1">Congestion del trafico</option>
  <option value="2">Accidente</option>
</select>
<input type="button" id="submit" value="Submit">

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68685

Try this

$(document).ready(function(){
  var slc = $('#id_event_type');
  
  var value;
  
  slc.on('change', function(){
  value  = slc.find(":selected").val();
  alert(value);
  })
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id_event_type" name="event_type" required="">
  <option value="" selected="selected">---------</option>
  <option value="0">Obras en la carretera</option>
  <option value="1">Congestion del trafico</option>
  <option value="2">Accidente</option>
</select>

Upvotes: 1

Ravi Shankar
Ravi Shankar

Reputation: 1559

Working code : Try like this

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var toRet, eventIcon;
$(document).ready(function(){
  $('#id_event_type').on('change', function() {
      toRet = $('#id_event_type').val();
      if (toRet == 2){
            var eventIcon = new OpenLayers.Icon('/stati/img/accidente.png',eventSize, eventOffset);
        }
        if (toRet == 0){
            var eventIcon = new OpenLayers.Icon('/static/img/obrasMarker.png', eventSize, eventOffset);
        }
        if (toRet == 1){
           var eventIcon = new OpenLayers.Icon('/static/img/alertMarker.png', eventSize, eventOffset);
        }
        if (toRet == ""){
           var eventIcon = new OpenLayers.Icon('/static/img/alertMarker.png', eventSize, eventOffset);
        }
      });
});
</script>
<body>
<select id="id_event_type" name="event_type" required="">
  <option value="" selected="selected">---------</option>
  <option value="0">Obras en la carretera</option>
  <option value="1">Congestion del trafico</option>
  <option value="2">Accidente</option>
</select>
  </body>
</html>

Upvotes: 0

Brett Gregson
Brett Gregson

Reputation: 5923

You have multiple val() calls which are causing the issue. Also you don't need the :selected part of your selector:

var toRet
$(document).ready(function(){
  $('#id_event_type').on('change', function() {
     toRet = $(this).val();// get the value of the select
     alert(toRet);
   });
});

Working example

Since you want to compare the value as an integer, you can parse the string by using parseInt() like so (otherwise the value will be returned as a string):

toRet = parseInt( $(this).val(),10 );

Working example with parseInt()

Upvotes: 0

guradio
guradio

Reputation: 15565

$(document).ready(function(){
  $('#id_event_type').on('change', function() {
    toRet = $('#id_event_type option:selected').val(); //getting val() here of selected option
    alert(toRet);//no neet to get .val() here

   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id_event_type" name="event_type" required="">
  <option value="" selected="selected">---------</option>
  <option value="0">Obras en la carretera</option>
  <option value="1">Congestion del trafico</option>
  <option value="2">Accidente</option>
</select>

Getting .val() of already value will really produce undefined

Upvotes: 1

Nalin Aggarwal
Nalin Aggarwal

Reputation: 888

There is no need to again use the selector with

$(toRet).val()

toret is solely referencing the value this time. Try the below

$('#id_event_type').on('change', function() {
    toRet = $('#id_event_type :selected').val(); //:selected is not necesary 
    alert(toRet);//return value

   });

Upvotes: 0

Preethi Mano
Preethi Mano

Reputation: 445

Try this 

 $(document).ready(function(){
      $('#id_event_type').on('change', function() {
        toRet = $('#id_event_type :selected').val();
        alert(toRet);

       });
    });

Upvotes: 0

Related Questions