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 — Alive to die - Anant, Aug 30 '18 at 13:01
Does this answer your question? [how to change a selections options based on another select option selected?](https://stackoverflow.com/questions/4480637/how-to-change-a-selections-options-based-on-another-select-option-selected) — Karl Knechtel, Apr 28 '23 at 01:57

score 0 · Answer 1 · 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

975
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 2 · answered Aug 30 '18 at 13:50

0

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.

answered Aug 30 '18 at 13:50

lcssanches

995
12
33

Why use POST if you are going to send the payload in the URL? If this is just a reading call, there is nothing wrong with GET as the request method. – mickmackusa Apr 28 '23 at 01:57

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

You should not be building HTML in your controller. You should pass the raw data back to the client side and the client-side scripting should populate the select options. This `foreach()` is a weird choice. Is this creating multiple options which have the same visible text? Is the loop actually needed? — mickmackusa, Apr 28 '23 at 01:58

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

3 Answers3