如何使用AJAX / PHP / JAVASCRIPT根据其他列实时显示数据值？

I'm currently trying to do a survey system. I have a dynamic dropdown that displays one column 'questiontitle' from my table database. Here's my code of displaying the 'questiontitle' in the dropdown.

<?php
    $query=mysqli_query($con, "SELECT * FROM question"); 
            while($row=mysqli_fetch_array($query))
            {
?>
                    echo "<option value='$row[question_id]'>";
                    echo $row["questiontitle"];
                    echo "</option>";
    <?php
            }
?>
            echo "</select>";

And here's my database table. enter image description here

My main question is how do I display the 'Option_1 to Option_10 columns' depending on the 'answer_type' column when a data is clicked from the dropdown in real time without refreshing the page? Like if the 'answer_type' is checkbox, it will display the option1-10 as checkbox and if it's radiobutton, it will display the option1-10 as radiobuttons.

On select box change event pass questionid to server side and query your database for answer_type and options and in that method add a condition

$options = '';
if(anwsertype=='radio') {
 $options  .= <input type="radio" /> Your option
} else {
 $options  .= <input type="checkbox" />Your option
}

The above condition should be in a loop for each option.

There is a lot work to be done to achieve what you want to do. But I can give you a small snippet which you can use to start.

What you still have to do is

  1. Show a page with all questions in the select box. This is done in PHP
  2. checking how ajax works. Expand the showQuestion() function with ajax functionality so your question & answer data is retrieved from the server. this is a good read. When you got your answer, call the appropriate function to display your question and answers. OR store all your information locally...
  3. add a button so that you can send the answers to the server. Listen to the click event and send data (small modifications are required to what I have wrote though) to the server (read the link that I have shown in point 2)

// question object
var questions = {
  json1: {
    questiontitle: 'How frequently ...',
    answertype: 'radiobutton',
    options: ['Heavy user', 'serious user', 'regular user', 'light user']
  },
  json2: {
    questiontitle: 'What part of the day...',
    answertype: 'checkbox',
    options: ['Morning', 'Afternoon', 'Early evening', 'lat evening']
  },
  json3: {
    questiontitle: 'To what extend does the ...',
    answertype: 'radiobutton',
    options: ['1-5 times', '6-10 times', '> 10 times']
  }
};

// function that adds the "questions" input elements to the container
function insertToQuestionBox(els) {
  var box = document.getElementById('questionBox');
  // cleanup box
  while(box.firstChild) box.removeChild(box.firstChild);
  
  // populate with els
  for(var i = 0; i < els.length; ++i) box.appendChild(els[i]);
}

// creates the input element based on args
function createInput(type, name, text) {
  var i = document.createElement('input');
  i.type = type;
  i.name = name;
  
  var l = document.createElement('label');
  l.textContent = text;
  
  var s = document.createElement('section');
  s.appendChild(l);
  s.appendChild(i);
  return s;
}

// create element with question in it
function createQuestionEl(question) {
  var s = document.createElement('span');
  s.textContent = question;
  return s;
}

// function that is called if the question is of type radio
function handleRadioButtons(data) {
    var inputs = [];
    inputs.push(createQuestionEl(data.questiontitle));
    for(var i = 0; i < data.options.length; ++i) {
      inputs.push(createInput('radio', 'rraaddioo', data.options[i]));
    }
    
    insertToQuestionBox(inputs);
}

// create checkboxes
function handleCheckboxes(data) {
    var inputs = [];
    inputs.push(createQuestionEl(data.questiontitle));
    for(var i = 0; i < data.options.length; ++i){
      inputs.push(createInput('checkbox', 'nana' + i, data.options[i]));
    }
    
    insertToQuestionBox(inputs);
}

// gets called each time the drop down has changed
function showQuestion() {
  var data = questions[this.value];
  switch(data.answertype) {
    case 'radiobutton': handleRadioButtons(data); break;
    case 'checkbox': handleCheckboxes(data); break;
    // todo when default? error ?
  }
}


// listen to select changes
document.getElementById('showQuestion').addEventListener('change', showQuestion);
<select id="showQuestion">
  <option>please choose</option>
  <option value="json1">show json1</option>
  <option value="json2">show json2</option>
  <option value="json3">show json3</option>
</select>
<div id="questionBox"></div>

</div>