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

Question

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

<?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' 是复选框，它会将 option1-10 显示为复选框，如果它是单选按钮，它会将 option1-10 显示为单选按钮。

Answer 1

要实现您想做的事情，还有很多工作要做。但我可以给你一个小sn-p，你可以用它来开始。

你还要做的是

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

Answer 2

在选择框更改事件中，将 questionid 传递到服务器端并查询您的数据库以获取 answer_type 和选项，并在该方法中添加一个条件

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

上述条件应该在每个选项的循环中。