如何实现未选择尺寸或颜色时弹出提示弹窗？技术求助

原生JavaScript方案（基础版） #

先搭建HTML结构，包含尺寸选择、颜色选择和触发按钮：

<!-- 尺寸选择下拉框 -->
<select id="sizeSelect">
  <option value="">请选择尺寸</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
</select>

<!-- 颜色选择下拉框 -->
<select id="colorSelect">
  <option value="">请选择颜色</option>
  <option value="red">红色</option>
  <option value="blue">蓝色</option>
  <option value="black">黑色</option>
</select>

<!-- 触发按钮 -->
<button id="submitBtn">确认提交</button>

然后编写JavaScript逻辑，监听按钮点击事件，判断是否选择了尺寸和颜色：

document.getElementById('submitBtn').addEventListener('click', function() {
  const selectedSize = document.getElementById('sizeSelect').value;
  const selectedColor = document.getElementById('colorSelect').value;

  // 检查是否未选择尺寸或颜色
  if (!selectedSize || !selectedColor) {
    alert('*Size or color is not selected');
  } else {
    // 已完成选择，执行后续业务逻辑（如提交表单）
    console.log(`已选择尺寸：${selectedSize}，颜色：${selectedColor}`);
  }
});

自定义样式弹窗方案（匹配示例效果） #

如果需要和你提供的示例弹窗样式一致，可以用自定义弹窗替代原生alert：

HTML结构 #

<!-- 尺寸、颜色选择和按钮 -->
<select id="sizeSelect">
  <option value="">请选择尺寸</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
</select>

<select id="colorSelect">
  <option value="">请选择颜色</option>
  <option value="red">红色</option>
  <option value="blue">蓝色</option>
  <option value="black">黑色</option>
</select>

<button id="submitBtn">确认提交</button>

<!-- 自定义弹窗 -->
<div id="customAlert" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 24px; background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); z-index: 9999;">
  <p style="margin: 0 0 16px; color: #333;">*Size or color is not selected</p>
  <button id="closeAlert" style="padding: 8px 16px; background: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer;">确定</button>
</div>

<!-- 遮罩层 -->
<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 9998;"></div>

JavaScript逻辑 #

const submitBtn = document.getElementById('submitBtn');
const customAlert = document.getElementById('customAlert');
const overlay = document.getElementById('overlay');
const closeAlert = document.getElementById('closeAlert');

// 提交按钮点击事件
submitBtn.addEventListener('click', function() {
  const selectedSize = document.getElementById('sizeSelect').value;
  const selectedColor = document.getElementById('colorSelect').value;

  if (!selectedSize || !selectedColor) {
    // 显示弹窗和遮罩
    customAlert.style.display = 'block';
    overlay.style.display = 'block';
  } else {
    // 执行提交逻辑
    console.log(`提交成功：尺寸${selectedSize}，颜色${selectedColor}`);
  }
});

// 关闭弹窗事件
closeAlert.addEventListener('click', hideAlert);
overlay.addEventListener('click', hideAlert);

function hideAlert() {
  customAlert.style.display = 'none';
  overlay.style.display = 'none';
}

注意事项 #

1. 确保HTML元素的ID与JavaScript中的选择器完全匹配
2. 如果是表单提交场景，需要在事件函数中添加event.preventDefault()阻止默认提交行为
3. 自定义弹窗的样式可以根据需求调整（如字体、背景色、按钮样式等）

内容的提问来源于stack exchange，提问作者Haris Aziz