如何根据下拉菜单的选项执行代码？

Question

我在做表单验证，如果下拉菜单选中的是“请选择”，那就显示出后面的提示文字。html 如下：

<select class="span3" id="phase">
    <option>请选择</option>
    <option>小学</option>
    <option>初中</option>
    <option>高中</option>
    <option>幼儿园</option>
</select>
<span class="help-inline c-81f" style="display:none;">请选择学段</span>
<a class="ks-button ks-button-primary" href="javascript:;" id="submit">提交</a>

js 是这样写的：

var oBtnSub=document.getElementById('submit');
var oSelPh=document.getElementById('phase');
var sTxtP=oSelPh.options[oSelPh.selectedIndex].text;
var oSpanP=oSelPh.nextElementSibling || oSelPh.nextSibling;

oBtnSub.onclick=function(){
   if(sTxtP!='请选择'){
      return;
    }
    else{
      oSpanP.style.display='inline-block';
    }
};

现在的结果是无论我选择哪个选项，都会出现文字提示。求高手解答，问题出在哪儿了？

Answer 1

var oSelPh=document.getElementById('phase');var sTxtP=oSelPh.options[oSelPh.selectedIndex].text; 这个代码，要放到onclick中去。

Answer 2

正解！但是这两行代码为什么必须放在 onclick 里面呢？这个表单里我还有一个对文本框的验证，而文本框的声明没有放在 onclick 里，是没问题的，这是为什么呢？