how to change value of select options based on another select option selected?

Question

I am not sure the title is explained perfectly.

I have 2 select tags and both select tags data are coming from the same table, in

The fist select tag - I am fetching data from the database which stores location name => This works perfectly and I have 3 locations name in the database.

<select name="location" class="form-label" id="location" required>
   <option value="">Select Dojo Location</option>
   <?php foreach ($location as $row): ?>
       <option value="<?php echo $row->id; ?>"><?php echo $row->location; ?></option>
   <?php endforeach; ?>
</select>

Image for first select tag

The second select tag - I am fetching prices from different columns of the same table but it shows every price from different locations.

<select name="month" class="form-label" id="month" required>
   <option value="">Select Fees Period</option>
   <?php foreach ($location as $row1): ?>
      <option value="<?php echo $row1->admission_fee_1; ?>">Monthly</option>
      <option value="<?php echo $row1->admission_fee_1; ?>">Quarterly</option>
      <option value="<?php echo $row1->admission_fee_6; ?>">Half Yearly</option>
      <option value="<?php echo $row1->admission_fee_12; ?>">Annually</option>
   <?php endforeach; ?>
<?php endif; ?>

Image for second select tag

Image for table data

What I am trying to do is, when user select location in 1 select tag, so it only shows the prices of that selected location from database in second select tag.

This is what I am getting in the result

But I do not succeed yet, any solution is helpful or is there any other way to do this or am I doing it wrong.

Thanks in advance.

You have to provide query code through which you are trying to get prices for particular location and time period — Anant Kumar Singh, Aug 30 '18 at 13:01

score 0 · Answer 1 · answered Aug 30 '18 at 13:07

0

You have to use JavaScript and onChange method. It was resolved manytimes, e.g. how to change a selections options based on another select option selected?

answered Aug 30 '18 at 13:07

Lukas

11
2

score 0 · Answer 2 · answered Aug 30 '18 at 13:08

0

You need to make some ajax call.

On Selection of first location tag; you can make jQuery Ajax call and get prices of that selected location only. In Ajax response you can receive HTML of second select tag and replace with current one.

Let me know if you need further explanation.

answered Aug 30 '18 at 13:08

Divyesh Prajapati

942
5
14

you need to call change event on select tag 1 using jQuery and in that you need to do som AJAX stuffs – Divyesh Prajapati Aug 31 '18 at 07:22

score 0 · Answer 3 · answered Aug 30 '18 at 13:50

You need fetch the data dinamically.

Something like this

$( "#location" ).change(function() {
    // this.value is your ID
    $.post('/endpoint/fetch-details/' + this.value)
     .done(function(data) {
          // load data into another SELECT
     })
     .fail(function() {
          alert( "error" );
     })       
});

On Codeigniter you could have a controller method (/endpoint/fetch-details/) that returns a JSON object.

score 0 · Accepted Answer · answered Sep 03 '18 at 09:58

Successfully Done...

Ajax function =>

$(document).ready(function () {
    $('#location').on('change', function () {
        var location_id = $(this).val();

        if (location_id == '') {
            $('#fees').prop('disabled', true);
        } else {
            $('#fees').prop('disabled', false);
            $.ajax({
                url: "<?php echo $base_url;?>welcome/getFeePeriod",
                type: 'POST',
                data: {location: location_id},
                dataType: 'json',
                success: function (data) {
                    //alert("Ok");
                    $('#fees').html(data);
                },
                error: function () {
                    alert("Error Accured...");
                }
            });
        }
    });
});

Controller function =>

public function getFeePeriod()
{
    $location_id = $this->input->post('location');
    $FeesPeriod = $this->admin_model->getFeePeriod($location_id);
    if (count($FeesPeriod)>0) {
        $fee_select_box = '';
        $fee_select_box .= '<option id="">Select Fee Period</option>';
        foreach ($FeesPeriod as $fees) {
        $fee_select_box .= '<option id="' . $fees->admission_fee_1 . '">Monthly</option>+
                            <option id="' . $fees->admission_fee_3 . '">Quarterly</option>+
                            <option id="' . $fees->admission_fee_6 . '">Half Yearly</option>+
                            <option id="' . $fees->admission_fee_12 . '">Yearly</option>';
        }
        echo json_encode($fee_select_box);
    }
}

model function =>

function getFeePeriod($location_id){
    $query = $this->db->get_where('location', array('id'=>$location_id));
    return $query->result();
}

Thanks everyone for their response...

how to change value of select options based on another select option selected?

4 Answers4