当值是动态的时，如何基于第一个选择列表选项更改第二个选择列表？

Question

I have php page for vehicle search filter which have 2 types of vehicle that is RV's and campervans and also have two selects

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

How do I do that with jQuery or php if I choose "Rv" in the first select? The second select would show me 8 passengers . If I choose Campervan in the first select, the second select would show me 5 passengers..

Answer 1

I would probably do something along these lines:

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

There are cleaner ways of doing this but this should serve to get the point across.

Few things to note about the PHP:

1. See how I check if the $_REQUEST key is available using empty - this avoids having to use @ which is generally not a good idea.

2. I am using a loop to echo the options in the passenger select to avoid code repetition because typing that out 8 times is boring ;-)

Hope this helps!

Answer 2

yes you need to add javascript code for that. insert below code in your page and check if this is what you want?

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