Question

我需要从select HTML中获取一个值，以便使用Integer值进行复制并采取其他操作。问题是我总是从select中得到未定义的值然后，我无法将undefined与Integer进行比较，谢谢。

代码：

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

代码已更新：

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>

Answer 1

试试这个

$(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>

Answer 2

<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>

.val()

获取已有值的var isValid = true;将真正产生未定义的

Answer 3

您有多个导致此问题的val()次来电。此外，您不需要选择器的:selected部分：

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

Working example

由于您希望将值作为整数进行比较，因此可以使用parseInt()来解析字符串，否则值将以字符串形式返回：

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

Working example with parseInt()

Answer 4

试试这个

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

       });
    });

Answer 5

无需再次使用

选择器

$（toRet）.VAL（）

toret这次只是引用了这个值。试试下面的

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

   });

Answer 6

工作代码：试试这个

<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>

Answer 7

尝试通过 选择字段名称来获取所选值 。

$(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">

在jQuery select中获取未定义的值

7 个答案: