как изменить значение опций выбора на основе другой выбранной опции?

Question

Я не уверен, что название объяснено идеально.

У меня есть 2 выбранных тега, и оба выбранных тега данные поступают из одной и той же таблицы, в

Первый тег выбора - я выбираю данные из базы данных, в которой хранится имя местоположения => Это отлично работает, и у меня есть 3 имени местоположения в базе данных.

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

Изображение для первого выбранного тега

Второй тег выбора - я выбираю цены из разных столбцов одной и той же таблицы, но он показывает каждую цену из разных мест.

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

Изображение для второго выбранного тега

Изображение для табличных данных

То, что я пытаюсь сделать, это когда пользователь выбирает местоположение в 1 теге выбора, поэтому он показывает только цены на это выбранное местоположение из базы данных во втором теге выбора.

Это то, что я получаю в результате

Но мне пока не удается, любое решение полезно, или есть какой-то другой способ сделать это, или я делаю это неправильно.

Заранее спасибо.

Answer 1

Успешно сделано ...

Функция Ajax =>

$(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...");
                }
            });
        }
    });
});

Функция контроллера =>

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);
    }
}

функция модели =>

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

Спасибо всем за ответ ...

Answer 2

Вам нужно сделать ajax-вызов.

При выборе первого тега местоположения; Вы можете позвонить в JQuery Ajax и узнать цены только в выбранном месте. В ответе Ajax вы можете получить HTML второго тега select и заменить его текущим.

Дайте мне знать, если вам нужны дальнейшие объяснения.

Answer 3

Вам нужно получить данные динамически.

Примерно так

$( "#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" );
     })       
});

В Codeigniter у вас может быть метод контроллера (/ endpoint / fetch-details /), который возвращает объект JSON.

Answer 4

Вы должны использовать JavaScript и метод onChange. Это было решено много раз, например как изменить параметры выбора на основе другого выбранного параметра выбора?