javascript 三个下拉选择

5uzkadbs  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(105)

我想使用PHP创建三个下拉列表中的名称选择,JavaScript和jQuery和从MySQL获取数据.所以,如果我选择了第一个选择上的某个名称,那么它不会显示在其他选择和同样的去其他选择以及.你能帮我吗?

xmd2e60i

xmd2e60i1#

如果我理解得很好的话,你的意思是像(国家,城市)下拉菜单。所以当你选择一个不同的国家,城市列表会改变。
如果这就是你的意思,那么解决方案如下:
在第一个select中添加一个“onchange”监听器,然后在更改时更改第二个select的innerHTML。

方法一:

要从PHP中获取数据,您可以使用echo在脚本中打印它。因此,您可以打印数据,而不是“My Option 1”。

<select onchange="changeSelection(this)">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

<select id="select-2"></select>

<script>
function changeSelection(selectTag){
// to get your data from php you can print the values you want with echo
  if(selectTag.value == "option1"){
    document.getElementById("select-2").innerHTML = "<option value='my-option1'>My Option1</option>"
  }else if(selectTag.value == "option2"){
    document.getElementById("select-2").innerHTML = "<option value='my-option2'>My Option2</option>"
  }
  // And you continue with all the options you have, and the same thing with the third select tag
}
</script>

方法二:

或者你也可以 AJAX 查询来获取每一个变化的数据。
这段代码应该在onchange listener触发的函数中:

let xhr = new XMLHttpRequest();
  xhr.open("POST", "yourPHPfile.php", true);
  xhr.onload = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        let data = xhr.response;
        document.getElementById("select-2").innerHTML = data;
      }
    }
  };
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("selectValue=" + selectValue);

其中文件“yourPHPfile.php”应该根据您在$_POST[“selectValue”]中发送给它的值返回您想要的第二个选择器中的值。

相关问题