HTML下拉框数值如何用Ajax传递到后台

请问HTML代码这样写,如何写Ajax?求各位解惑!


<div class="item">
      <div class="text">所属项目:div>
      <div class="value">
          <select id="selectLeo" class="form-control form-control-placeholder" value='${pickListModels}'>
          <option value="0" disabled selected hidden>请选择option>
          <option value="1">项目1option>
          <option value="2">项目2option>
          <option value="3">项目3option>
          <option value="4">项目4option>
          <option value="5">项目5option>
        select>
      div>
    div>
    <div class="item">
      <div class="text">调查类型:div>
      <div class="value">
        <select id="selectLeo" class="form-control form-control-placeholder">
          <option value="0" disabled selected hidden>请选择option>
          <option value="1">老师option>
          <option value="2">学生option>
        select>
      div>
    div>

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
要使用 Ajax 将下拉框的数值传递到后台,你需要编写 JavaScript 代码来实现 Ajax 请求。以下是一个简单的示例:

// 获取下拉框元素
var projectSelect = document.getElementById("projectSelect");
var typeSelect = document.getElementById("typeSelect");

// 当选择发生变化时,发送 Ajax 请求
projectSelect.addEventListener("change", function() {
  var projectId = projectSelect.value;
  var typeId = typeSelect.value;
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/some/url/to/server", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.send(JSON.stringify({ projectId: projectId, typeId: typeId }));
});

typeSelect.addEventListener("change", function() {
  var projectId = projectSelect.value;
  var typeId = typeSelect.value;
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/some/url/to/server", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.send(JSON.stringify({ projectId: projectId, typeId: typeId }));
});

这段代码将监听下拉框的 change 事件,当下拉框的选项被选择时,将发送一个 Ajax POST 请求到指定的后台 URL。请求的数据是一个包含 projectIdtypeId 属性的 JSON 对象,其中 projectIdtypeId 分别是所选项目和调查类型的值。

你需要将 /some/url/to/server 替换为你后台接收 Ajax 请求的 URL。在后台处理 Ajax 请求时,你可以使用相应的开发语言和框架来获取请求的数据并进行处理。


如果以上回答对您有所帮助,点击一下采纳该答案~谢谢

select 选择框有一个change 事件,你需要在js 中绑定事件,然后根据条件去触发 ajax请求,并将参数 pickListModels 传进去

select 价格 onchange事件里 使用

var obj = document.getElementByIdx_x(”testSelect”); //定位id

var index = obj.selectedIndex; // 选中索引

var text = obj.options[index].text; // 选中文本

var value = obj.options[index].value; // 选中值