时间戳

首页 > 解决方案 > 在用户使用 id 或 class 选择的表单选项上显示 div

javascript - 在用户使用 id 或 class 选择的表单选项上显示 div

问题描述

这里的第一个问题，所以请放轻松！试图让这个表单选择工作，但几个小时后仍然在挣扎。当只有一个选项有一个 id 时，代码可以正常工作，但不适用于多个 id。感觉正确的方法是为每个选择选项分配一个类，但仍然无法弄清楚。任何帮助将不胜感激！

      <form>
          <p align="center">Size : 
              <input type="hidden" value="1" name="qty1" />
              <select name="productpr1"  id="getFname" onchange="showdiv(this);">
                <option selected value="ERROR - Please select finish">please select</option>
                <option id="show" value="product 1:5:0:105805">product 1</option>
                <option id="" value="product 2:10:0:105205">product 2</option>
                <option id="show" value="product 3:15:0:105605">product 3</option>
              </select>
          </p>
          <div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
            <p><input type="submit" class="button" value="ADD TO BASKET" /></p>
          
        </form>

<script> 
function showdiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
    admOptionValue = document.getElementById("show").value;
    if(admOptionValue == nameSelect.value){
        document.getElementById("admDivCheck").style.display = "block";
    }
    else{
        document.getElementById("admDivCheck").style.display = "none";
    }
}
else{
    document.getElementById("admDivCheck").style.display = "none";
}
}
</script>

编辑 感谢您在此处提供的帮助-可以根据需要使用的最终版本：

<input type="hidden" value="1" name="qty1" />
      <select name="productpr1"  id="getFname" onchange="showdiv();">
        <option selected value="ERROR - Please select finish">please select</option>
        <option class="show" value="product 1:5:0:105805">product 1</option>
        <option class="" value="product 2:10:0:105205">product 2</option>
        <option class="show" value="product 3:15:0:105605">product 3</option>
      </select>
  <div id="admDivCheck" style="display:none">Choose delivery date</div>
    <p><input type="submit" class="button" value="ADD TO BASKET" /></p>
<script>
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;

if(askForDelivery.contains('show')){
  document.getElementById('admDivCheck').style.display = 'block';
} 
else{document.getElementById('admDivCheck').style.display = 'none';
}}
</script>

标签： javascript

解决方案

id 属性用于对象文档模型，并且应该是唯一的，只需使用 1,2,3 即可

推荐阅读