如何獲取select元素內的span元素的ID？

Question

我的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>
   ...

在我的JavaScript中，我試圖獲取表單的ID，以顯示一條消息，告訴用戶如果未選擇任何內容並按下“提交”按鈕，則從下拉列表中選擇某項。 問題是javascript塊返回未定義。

//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;

};

Answer 1

select標簽內不能包含span標簽。 瀏覽器在渲染此HTML時會刪除它。

請參閱下面的演示 （在瀏覽器的開發工具中檢查瀏覽器在渲染時剝離了span標簽 ）

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

您需要將span標簽放在select標簽之外。

Answer 2

試試這個，一旦您選擇並提交，它就會降下來並重置。

 function submit(){ if(!document.getElementById("province").value){ document.getElementById("provinceWarning").innerHTML="*Please choose a Province*"; valid=false; }else{ document.getElementById("provinceWarning").innerHTML="" valid=true; window.alert("thank you") } } 

 <form name="profile"> <select id="province" name="province"> <option value="">Select Province</option> <option value="AB">Alberta</option> </select> <span id="provinceWarning" class="alert"></span> </form> <button id="btnSubmit" onclick="submit();">Submit</button> 

Answer 3

問題：

1-您無法在select選項中定義span ，然后將其移出選擇范圍

2-要檢查選擇值，您應該getElementById("province")然后檢查該值

3-可測試的代碼如下所示（您可以根據需要進行更改）：

 function func() { var ddl = document.getElementById("province"); var selectedValue = ddl.options[ddl.selectedIndex].value; if (selectedValue == ""){ document.getElementById("provinceWarning").innerHTML="*Please choose a Province*"; valid=false; }else{ alert("Thank You!"); } } 

 <form name="profile"> <div> <span id="provinceWarning" class="alert"></span> </div> <div> <select id="province" name="province"> <option value="">Select Province</option> <option value="AB">Alberta</option> </select> </div> </form> <button id="btnSubmit" onclick="func();">Click Me</button>