如何使用 div 创建自定义选择元素？答案

【问题标题】：How can I create a custom select element using divs?如何使用 div 创建自定义选择元素？
【发布时间】：2021-09-05 06:22:28
【问题描述】：

为了创建这个自定义设计，我没有使用选择元素。我试图在 handleSubmit() 中获取值，但它在控制台中显示为 undefined。

const handleSubmit = (event) => {
  event.preventDefault();
  var timing = document.getElementById("timings-id");
  console.log(timing.value);
}

<form>
  <div class="timings" id="timings-id">
    <div value="01:00">01:00</div>
    <div value="02:00">02:00</div>
    <div value="03:00">03:00</div>
    <div value="04:00">04:00</div>
    <div value="05:00">05:00</div>
    <div value="06:00">06:00</div>
    <div value="07:00">07:00</div>
    <div value="08:00">08:00</div>
    <div value="09:00">09:00</div>
    <div value="10:00">10:00</div>
    <div value="11:00">11:00</div>
    <div value="12:00">12:00</div>
  </div>
  <button type="submit" onclick="handleSubmit()">BOOK<button>
</form>

【问题讨论】：

你不能这样做，因为value 仅适用于某些输入标签
点击添加项目到数组
你能举一个相同场景的例子吗？
timings-id是一个div，div没有value属性
您的关闭按钮标签缺少斜线。

标签： javascript html css forms select

【解决方案1】：

另一种方法是将点击事件处理程序分配给内部 div 元素，然后 onclick 将 data-value 属性添加到父 div。

const timingsDiv = document.getElementById("timings-id");
const valueDivs = timingsDiv.querySelectorAll("div");
const submitBtn = document.getElementById("submit");

valueDivs.forEach((div) => {
  div.addEventListener("click", (e) => {
    timingsDiv.dataset.value = e.target.dataset.value;
  });
});

const handleSubmit = (event) => {
  event.preventDefault();
  var timing = document.getElementById("timings-id");
  console.log(timing.dataset.value);
}

submitBtn.addEventListener("click", handleSubmit);

【讨论】：

【解决方案2】：

您可以编写一个模块来计算选定的小时数。你可以在下面找到一个简单的实现

function MultiSelect(node) {
  var statesByValue = {};
  
  
  function getSelectedValues() {
    return Object.keys(statesByValue).filter(function (value) {
      return statesByValue[value];
    });
  }
  
  
  function toggleSelection(ev) {
    var key = ev.target.dataset.value;
    var isSelected = ev.target.classList.contains('selected');
  
    statesByValue[key] = !isSelected;
    ev.target.classList.toggle('selected');
  }
  
  node.addEventListener('click', toggleSelection);
  
 
  
  return {
    getSelectedValues: getSelectedValues
  }
}

const form = document.querySelector('form');
const customSelect = MultiSelect(document.querySelector('#timings-id'));


form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  console.log(customSelect.getSelectedValues());
})

.timings div {
  padding: .25rem .5rem;
  cursor: pointer;
}

.selected {
  background: skyblue;
}

<form>
   <div class="timings" id="timings-id">
     <div data-value="01:00">01:00</div>
     <div data-value="02:00">02:00</div>
     <div data-value="03:00">03:00</div>
     <div data-value="04:00">04:00</div>
     <div data-value="05:00">05:00</div>
     <div data-value="06:00">06:00</div>
     <div data-value="07:00">07:00</div>
     <div data-value="08:00">08:00</div>
     <div data-value="09:00">09:00</div>
     <div data-value="10:00">10:00</div>
     <div data-value="11:00">11:00</div>
     <div data-value="12:00">12:00</div>
   </div>
  <button type="submit">BOOK</button>
</form>

【讨论】：