javascript - 如何根据AJAX/PHP/JAVASCRIPT的另一列实时显示数据值？

我目前正在尝试做一个调查系统。我有一个动态下拉列表，显示我的表数据库中的一列“ questiontitle”。这是我在下拉菜单中显示“ questiontitle”的代码。

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

这是我的数据库表。


我的主要问题是，当从下拉列表中实时单击数据而不刷新页面时，如何根据“ answer_type”列显示“ Option_1至Option_10列”？就像'answer_type'是复选框一样，它将选项1-10显示为复选框，如果它是单选按钮，则将选项1-10显示为单选按钮。

最佳答案

要完成您想做的事情，有很多工作要做。但是我可以给你一个小片段，你可以用它来开始。

您仍然要做的是


在选择框中显示一个包含所有问题的页面。这是用PHP完成的
检查ajax的工作方式。使用ajax功能扩展showQuestion()功能，以便从服务器检索您的问题和答案数据。 this is a good read。得到答案后，调用适当的功能以显示您的问题和答案。或将您的所有信息存储在本地...
添加一个按钮，以便您可以将答案发送到服务器。侦听click事件并将数据（虽然我写的内容需要做一些小的修改）发送到服务器（阅读我在第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>