Question

我想知道如何设计广告形式，例如olx，其表格字段在类别更改时发生了变化。

Answer 1

var subs = document.querySelectorAll(".sub");

function modeChanged() {
  removeDisp();
  var chooser = document.querySelector("#chooser").value;
  if (chooser !== "") {
    document.querySelector("." + chooser).style.display = "block";
  }
}
removeDisp();

function removeDisp() {
  for (var a = 0; a < subs.length; a++) {
    subs[a].style.display = "none";
  }
}

.sub {
  margin-top: 10px;
}
label {
  margin-top: 5px;
  display: block !important;
}
label span {
  width: 200px;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <select name="chooser" id="chooser" onchange="modeChanged()">
    <option value="">Select</option>
    <option value="home">Home</option>
    <option value="shop">Shop</option>
    <option value="car">Car</option>
  </select>
  <div class="sub home">
    <label><span>Type Of Home:</span>
      <input/>
    </label>
    <label><span>Price Range:</span>
      <input/>
    </label>
  </div>
  <div class="sub shop">
    <label><span>Shop Size:</span>
      <input/>
    </label>
    <label><span>Shop Area:</span>
      <input/>
    </label>
  </div>
  <div class="sub car">
    <label><span>Car Modal:</span>
      <input/>
    </label>
    <label><span>Date of purchase:</span>
      <input/>
    </label>
  </div>
</body>

</html>

检查

olx.com如何在类别更改中显示表单字段并相应提交？

1 个答案: