javascript - 根据用户选择显示表单 - ajax

Question

我有一个<select>框。

用户必须选择一个选项才能继续。

然后，<select>框应该消失( select.onchange(html.(display:hidden;)) ，类似这样，对吧？!)和 <option>必须通过 ajax 发送到另一个文件或 - 相同。

<select name="var" id="var">
  <option value="a">A</option>
  <option value="b">b</option>
</select>

接下来，它将执行查询(基于之前的选择)并在 div 内构建表单组合(可能是一个或多个)供用户选择:

<div>
  <p>Some info</p>
<form>
  <inputs>
  <inputs>
  <inputs>
</form>
</div>

我对 javascript 不太感兴趣，而且我对这些函数有点迷失( load() 、 getJSON() 等)。

最适合此目的的是什么？

我正在尝试getJSON() *，但我在语法、调试和操作变量、请求等方面遇到问题。

所有 PHP 代码都可以运行。 我只是想增加流畅度、减少刷新、让用户感到轻松、安全和性能。

*getJSON 似乎不适合这个

Answer 1

您可以使用 onchange Javascript 事件:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange

var selectField = document.getElementById('selectField');
selectField.onchange = function()
{
    //Select Value
    var value = selectField[selectField.selectedIndex].value;
    //Hides the field
    selectField.style.display = "none";
    //Display the value
    document.getElementById("container").innerHTML = value;
}

HTML -

<div id="container">
 <select id="selectField" >
  <option value ="a">A</option>
  <option value ="b">B</option>
 </select>
</div>

在线演示:https://jsfiddle.net/acqwwbfb/2/ 这只是为了让您开始。