Javascript 如何在select元素中获取跨度元素的id？

我的html表单包含以下内容：

<form name="profile">
 ...
 <select id="province" name="province">
  <span id="provinceWarning" class="alert"></span>
  <option value="">Select Province</option>
  <option value="AB">Alberta</option>
   ...

---

在

select

标记中不能有

span

标记。浏览器在呈现此HTML时会将其剥离

请参见下面的演示（检查浏览器的开发工具浏览器在渲染时正在剥离span标记）

选择省
阿尔伯塔省

问题：

1-您不能在

select

选项中定义

span

，然后将其移出选择范围

2-要检查选择值，应

getElementById（“省”）

然后检查值

3-可测试代码可以如下所示（您可以根据需要进行更改）：

函数func（）
{
var ddl=document.getElementById（“省”）；
var selectedValue=ddl.options[ddl.selectedIndex].value；
如果（selectedValue==“”）{
document.getElementById（“provinceWarning”）.innerHTML=“*请选择一个省*”；
有效=错误；
}否则{
警惕（“谢谢！”）；
}
}

选择省
阿尔伯塔省
单击“我”

尝试此操作，选择并提交后，它将下降并重置

函数提交（）{
if（！document.getElementById（“省”）.value）{
document.getElementById（“provinceWarning”）.innerHTML=“*请选择一个省*”；
有效=错误；
}否则{
document.getElementById（“provinceWarning”）.innerHTML=“”
有效=真；
窗口提示（“谢谢”）
}
}

选择省
阿尔伯塔省
提交

if语句在我看来很奇怪，我很确定您需要一个选择器（document.getElementBy…），然后获取iti的值。更新了javascript部分。感谢消息显示，但它在左侧，并弄乱了下拉列表format@answerSeeker显示的是哪条消息，

span

的文本？您正在哪个浏览器上测试此功能？你不应该把

span

放在

select

里面，因为标准不支持它。有没有简单的方法让消息显示在右边？@answerseek，你在这里运行过代码片段吗，你看到输出了吗？是的，它把它放在选择省下拉列表的顶部。我想我得用一些药来解决这个问题css@answerSeeker，是的，你可以装饰它，如果你认为它对你有帮助，请接受它作为答案。你希望它位于选择选项的右侧，就像在我编辑之前一样？只需删除

span

的

div

和

select

，或者您可以根据需要使用Css对其进行装饰。您的帮助我修复了邮件问题的位置。将span放在select元素末尾的正下方修复了它，没有任何css或div。

//validate the profile form
function validate(e){

    e.preventDefault();

    var valid=true;


   if(document.profile.province.value == ""){
       document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
       valid=false;
    }

    if(valid){
        alert("Thank You!");
    }

    return valid;

};