JavaScript 前端弹出选择列表：带提交和取消按钮

以下是一个简单的示例代码，可以实现在前端弹出一个选择列表，包含提交和取消按钮：

function showSelectList() {
  // 创建选择列表元素
  var selectList = document.createElement('select');

  // 创建选项元素
  var option1 = document.createElement('option');
  option1.text = '选项1';
  selectList.add(option1);

  var option2 = document.createElement('option');
  option2.text = '选项2';
  selectList.add(option2);

  var option3 = document.createElement('option');
  option3.text = '选项3';
  selectList.add(option3);

  // 创建提交按钮元素
  var submitBtn = document.createElement('button');
  submitBtn.innerHTML = '提交';
  submitBtn.addEventListener('click', function() {
    // 在这里添加提交逻辑
    console.log('提交选项：' + selectList.value);
  });

  // 创建取消按钮元素
  var cancelBtn = document.createElement('button');
  cancelBtn.innerHTML = '取消';
  cancelBtn.addEventListener('click', function() {
    // 在这里添加取消逻辑
    console.log('取消选择');
  });

  // 创建选择列表容器元素
  var container = document.createElement('div');

  // 将选择列表、提交按钮和取消按钮添加到容器中
  container.appendChild(selectList);
  container.appendChild(submitBtn);
  container.appendChild(cancelBtn);

  // 将容器添加到页面中
  document.body.appendChild(container);
}

// 调用函数以显示选择列表
showSelectList();

此代码使用了原生的JavaScript来创建选择列表、选项、按钮和容器元素，然后将它们添加到页面中。还为提交按钮和取消按钮添加了点击事件侦听器，以便在点击它们时执行相应的逻辑。当用户选择某个选项并点击提交按钮时，该选项的值将被打印到控制台中。当用户点击取消按钮时，将打印一条消息表示用户取消了选择。