使用jQuery

时间:2018-11-05 11:03:43

标签: javascript jquery html

我试图从下拉列表(选择-选项)中发布一些值,但是无论我尝试什么,我都只会得到整个列表的第一个值。

不确定为什么,也许是因为我正在使用optgroups

我的代码:

HTML:

<select id="offertetijden">
    <option value="none" disabled>Maak uw keuze</option>
      <!-- Hoe is u groep verdeeld? -->
    <optgroup label="Ontbijt">
      <option value="ont_1">Ma t/m Vr / 09:00 - 11:30 / 0,5 uur</option>
      <option value="ont_2">Ma t/m Vr / 09:00 - 11:30 / 1 uur</option>
      <option value="ont_3">Ma t/m Vr / 09:00 - 11:30 / 1,5 uur</option>
      <option value="ont_4">Ma t/m Vr / 09:00 - 11:30 / 2 uur</option>
      <option value="ont_5">Ma t/m Vr / 09:00 - 11:30 / 2,5 uur</option>
      <option value="ont_6">Za - Zo / 09:00 - 11:30 / 0,5 uur</option>
      <option value="ont_7">Za - Zo / 09:00 - 11:30 / 1 uur</option>
      <option value="ont_8">Za - Zo / 09:00 - 11:30 / 1,5 uur</option>
      <option value="ont_9">Za - Zo / 09:00 - 11:30 / 2 uur</option>
      <option value="ont_10">Za - Zo / 09:00 - 11:30 / 2,5 uur</option>
    </optgroup>

    <optgroup label="Lunch">
      <option value="lun_1">Ma t/m Vr / 12:00 - 15:00 / 0,5 uur</option>
      <option value="lun_2">Ma t/m Vr / 12:00 - 15:00 / 1 uur</option>
      <option value="lun_3">Ma t/m Vr / 12:00 - 15:00 / 1,5 uur</option>
      <option value="lun_4">Ma t/m Vr / 12:00 - 15:00 / 2 uur</option>
      <option value="lun_5">Ma t/m Vr / 12:00 - 15:00 / 2,5 uur</option>
      <option value="lun_6">Ma t/m Vr / 12:00 - 15:00 / 3 uur</option>
      <option value="lun_7">Za - Zo / 12:00 - 15:30 / 0,5 uur</option>
      <option value="lun_8">Za - Zo / 12:00 - 15:30 / 1 uur</option>
      <option value="lun_9">Za - Zo / 12:00 - 15:30 / 1,5 uur</option>
      <option value="lun_10">Za - Zo / 12:00 - 15:30 / 2 uur</option>
      <option value="lun_11">Za - Zo / 12:00 - 15:30 / 2,5 uur</option>
      <option value="lun_12">Za - Zo / 12:00 - 15:30 / 3 uur</option>
      <option value="lun_13">Za - Zo / 12:00 - 15:30 / 3,5 uur</option>
    </optgroup>

    <optgroup label="Diner">
      <option value="din_1">Ma t/m Do / 17:00 - 22:00 / 1 uur</option>
      <option value="din_2">Ma t/m Do / 17:00 - 22:00 / 1,5 uur</option>
      <option value="din_3">Ma t/m Do / 17:00 - 22:00 / 2 uur</option>
      <option value="din_4">Ma t/m Do / 17:00 - 22:00 / 2,5 uur</option>
      <option value="din_5">Ma t/m Do / 17:00 - 22:00 / 3 uur</option>
      <option value="din_6">Ma t/m Do / 17:00 - 22:00 / 3,5 uur</option>
      <option value="din_7">Ma t/m Do / 17:00 - 22:00 / 4+ uur</option>
      <option value="din_8">Vr t/m Zo / 17:00 - 22:00 / 1 uur</option>
      <option value="din_9">Vr t/m Zo / 17:00 - 22:00 / 1,5 uur</option>
      <option value="din_10">Vr t/m Zo / 17:00 - 22:00 / 2 uur</option>
      <option value="din_11">Vr t/m Zo / 17:00 - 22:00 / 2,5 uur</option>
      <option value="din_12">Vr t/m Zo / 17:00 - 22:00 / 3 uur</option>
      <option value="din_13">Vr t/m Zo / 17:00 - 22:00 / 3,5 uur</option>
      <option value="din_14">Vr t/m Zo / 17:00 - 22:00 / 4+ uur</option>
    </optgroup>
</select>

jQuery:

$( document ).ready(function() {
  $('#offertetijden').change(function() {
     // console.log($(this).val())
     $('.hiddenoffertefields').show();
  })

  $("body").on("click",".offertebutton",function(){
    event.preventDefault();
    var $tijd = $('#offertetijden option:selected').val();
    var $volwassenen = $('#volwassenen').val();
    var $tieners = $('#tieners').val();
    var $kinderen = $('#kinderen').val();
    var $minis = $('#minis').val();
    var $babys = $('#babys').val();
    var $mailadres = $('#mailadres').val();
    url = 'includes/offertescript.php';

    var posting = $.post(url, {
      tijd: $tijd,
      volwassenen: $volwassenen,
      tieners: $tieners,
      kinderen: $kinderen,
      minis: $minis,
      babys: $babys,
      mailadres: $mailadres
    });

    posting.done(function( data ) {
     $( ".offerteresult" ).empty().slideDown('fast').append( data );
    });
  });

});

此行:var $tijd = $('#offertetijden option:selected').val(); 总是从此行<option value="ont_1">Ma t/m Vr / 09:00 - 11:30 / 0,5 uur</option>发布值。

即使我选择了另一个选项,然后再次触发点击功能。

我该怎么办?

0 个答案:

没有答案