如果值是动态的,如何根据第一个选择列表选项更改第二个选择列表?

时间:2017-09-06 08:16:11

标签: javascript php jquery

我有用于车辆搜索过滤器的php页面,它有两种类型的车辆,即RV和露营车,还有两个选择

<div class="fields">
<p>Vehicle Type</p>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
    <?php if(count($vehicleType) > 0 ){
        foreach($vehicleType as $vt){ ?>
            <option value="<?php echo $vt ?>" <?=isset($_GET['car_type'])&&$_GET['car_type']==$vt?'selected':'';?> ><?php echo $vt ?></option>
    <?php   }

    } ?>
</select>
</div>

<div class="fields">
<p>Total No. of Passengers*</p>


<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
        <option <?php if(@$_REQUEST['passengers'] == 1){?>selected<?php }?>>1</option>
    <option <?php if(@$_REQUEST['passengers'] == 2){?>selected<?php }?>>2</option>
    <option <?php if(@$_REQUEST['passengers'] == 3){?>selected<?php } ?>>3</option>
    <option <?php if(@$_REQUEST['passengers'] == 4){?>selected<?php }?>>4</option>
      <option <?php if(@$_REQUEST['passengers'] == 5){?>selected<?php }?>>5</option>
      <option <?php if(@$_REQUEST['passengers'] == 6){?>selected<?php }?>>6</option>
      <option <?php if(@$_REQUEST['passengers'] == 7){?>selected<?php }?>>7</option>
    <option <?php if(@$_REQUEST['passengers'] == 8){?>selected<?php }?>>8</option>

</select>
</div>

如果我在第一个选择中选择“Rv”,我如何使用jQuery或php?第二个选择将显示我8名乘客。如果我在第一个选择中选择Campervan,第二个选择将向我显示5个乘客..

2 个答案:

答案 0 :(得分:0)

我可能会沿着这些方向做点什么:

<?php
$number_of_passengers = 8;
if(!empty($_REQUEST['car_type'])) {
    $number_of_passengers = $_REQUEST['car_type'] == 'Campervans' ? 5 : 8;
}

$passengers = 0;
if(!empty($_REQUEST['passengers'])){
    $passengers = (int) $_REQUEST['passengers'];
}
?>

<select class="car" name="car_type" id="car_type">
    <option value="0">Select Vehicle</option>
    <option value="RV/Motorhome">RV/Motorhome</option>
    <option value="Campervans">Campervans</option>
</select>

<select class="half" name="passengers" id="passengers">
    <option>No. of Passengers</option>
    <?php
    for($i = 1; $i <= $number_of_passengers; $i++) {
        ?>
        <option
            <?php
                if($i == $passengers) {
                    echo ' selected ';
                }
            ?>
            >
            <?php echo $i ?>
        </option>
        <?php
    }
    ?>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('#car_type').change(function() {

        $("#passengers").children().removeAttr("selected");

        if ($(this).val() === 'Campervans') {
            $('#passengers option:nth-child(n+7)').hide();
        } else {
            $('#passengers option').show();
        }
    });
</script>

有更简洁的方法可以做到这一点,但这应该可以解决问题。

关于PHP的几点注意事项:

  1. 了解如何使用empty检查$_REQUEST密钥是否可用 - 这可以避免使用@,这通常不是一个好主意。

    < / LI>
  2. 我正在使用循环来回应乘客选择中的选项以避免代码重复,因为输入8次是无聊的; - )

  3. 希望这有帮助!

答案 1 :(得分:0)

是的,你需要为此添加javascript代码。 在页面中的代码下面插入并检查这是否是您想要的?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  $('.car').on('change', function(){
    if($(this).val() === 'RV/Motorhome'){
        $('.half').find('option').show()
    }else if($(this).val() === 'Campervans'){
     $('.half').find('option').slice(6).hide();
     }
  })
</script>