选中其中一个选择框

时间:2017-02-23 17:16:15

标签: javascript php jquery wordpress

我有4个选择框,第一个是车辆选择框,其他三个是车辆选择框的子,如果我选择车辆选择框并单击按钮我想显示错误信息,因为其中一个子选择也是我想要选择....任何一个帮助..我只是jquery / javascript初学者

enter image description here 用最简单的话说:如果我选择了主车辆选择框,那么选择一个子选择框(汽车,大篷车,公共汽车选择框)......

我的代码:

 <div class="members-wrap-vehicle">
    <label>Vehicle</label>
    <select name="reservation[vehicle]">
        <option value="0">Select</option>
        <?php for($i=1;$i<11;$i++) { ?>
        <option <?php if($_POST['reservation']['vehicle'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php } ?>
   </select>
</div>

<div class="members-vehicle-list" <?php if($_POST['reservation']['vehicle'] == 0) { echo 'style="display: none;"'; } ?> >
    <div class="members-wrap-adult">
        <label>Cars</label>
        <select name="reservation[cars]">
            <option value="0">Select</option>
            <?php for($i=1;$i<11;$i++) { ?>
            <option <?php if($_POST['reservation']['cars'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php } ?>
        </select>
    </div>

   <div class="members-wrap-child">
        <label>Caravans</label>
        <select name="reservation[caravans]">
            <option value="0">Select</option>
            <?php for($i=1;$i<11;$i++) { ?>
            <option <?php if($_POST['reservation']['caravans'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php } ?>
        </select>
    </div>

    <div class="members-wrap-infant">
        <label>Buses</label>
        <select name="reservation[buses]">
            <option value="0">Select</option>
                <?php for($i=1;$i<5;$i++) { ?>
                <option <?php if($_POST['reservation']['buses'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?>                                     </option>
            <?php } ?>
        </select>
      </div>

3 个答案:

答案 0 :(得分:0)

看看这个问题:How to check if an option is selected?

使用该链接中的建议,如果未选择任何选项,请添加包含所需消息的提醒。

答案 1 :(得分:0)

这应该有效,但有一些警告。您必须将<select>元素名称更改为ID(id ='xxx')。此外,该功能假定子菜单中的车辆总数总计车辆菜单中的数量。如果您还需要更多信息,请与我们联系!干杯

$('#BUTTON_ID').on('click', function() {                 
    var vehicle = $('#reservation[vehicle]').val();
    var cars = $('#reservation[cars]').val();
    var caravans = $('#reservation[caravans]').val();
    var buses = $('#reservation[buses]').val();

    if (vehicle == (cars + caravans + buses)) {
       //do something
    } else {
       //error message
       alert('Error has occurred.');
    };
});

答案 2 :(得分:0)

有新的代码行,但有一些更改,以便更好地了解您和测试。

HTML代码

<div class="members-wrap-vehicle">
     <label>Vehicle</label>
     <select name="reservation[vehicle]">
         <option value="0">Select</option>
         <option value="1">1</option>
         <option value="2">2</option>
     </select>
   </div>

   <div class="members-vehicle-list">
      <div class="members-wrap-adult">
         <label>Cars</label>
            <select name="reservation[cars]">
               <option value="0">Select</option>
               <option value="1">1</option>
               <option value="2">2</option>
            </select>
         </div>

         <div class="members-wrap-child">
             <label>Caravans</label>
             <select name="reservation[caravans]">
                <option value="0">Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>

        <div class="members-wrap-infant">
           <label>Buses</label>
           <select name="reservation[buses]">
               <option value="0">Select</option>
               <option value="1">1</option>
               <option value="2">2</option>
          </select>
        </div>
   </div>

jQuery代码

$(function(){

     $('.members-wrap-vehicle select').change(function(){
         var cars = $('.members-wrap-adult select option:selected').val();
         var caravans = $('.members-wrap-child select option:selected').val();
         var buses = $('.members-wrap-infant select option:selected').val();

         if ( cars == 0 || caravans == 0 || buses == 0 ){
             alert('please select any of cars or caravans or buses');
      }

   });
});

希望这适合你。感谢你好。