首页 新闻 会员 周边 捐助

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

0
悬赏园豆:5 [已解决问题] 解决于 2015-03-13 22:38

我在做表单验证,如果下拉菜单选中的是“请选择”,那就显示出后面的提示文字。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';
    }
};

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

zanetti的主页 zanetti | 初学一级 | 园豆:128
提问于:2015-02-21 21:26
< >
分享
最佳答案
0

楼上已经给出了正确的答案,既然你仍然不太明白,那么我来给你分解一下你的代码,如下:

var oBtnSub=document.getElementById('submit');
var oSelPh=document.getElementById('phase');
//或者选择框的值,现在的值是"请选择",oSelph.selectedIndex默认是0
var sTxtP=oSelPh.options[oSelPh.selectedIndex].text;
var oSpanP=oSelPh.nextElementSibling || oSelPh.nextSibling;

oBtnSub.onclick=function(){
  //当click的时候,sTxtp的值是空字符串
   if(sTxtP!='请选择'){
      return;
    }else{//所以走了else
      oSpanP.style.display='inline-block';
    }
};

你在onclick之前就已经获取了字符串,效果就类似于这样:

var sTxtP="请选择";

所以你在onclick的时候判定是错误的。

本质上你的错误发生在:

你提前获取了sTxtP的值。当用户选择下拉框里面的项,你的sTxtP的值也并没有改变,因为你在用户选择下拉框之前就已经确定了它的值。

所以我们要改成动态获取的,我们修正代码,并假设,在点击"提交"按钮之前,用户在下拉框选项中选择了"小学":

var oBtnSub=document.getElementById('submit');
var oSelPh=document.getElementById('phase');
var oSpanP=oSelPh.nextElementSibling || oSelPh.nextSibling;
oBtnSub.onclick=function(){
   //在onclick中获取 => 如果用户选择了小学,那么这里会拿到用户选择的"小学"
   var sTxtP=oSelPh.options[oSelPh.selectedIndex].text;
   if(sTxtP!='请选择'){
      return;
    }else{
      oSpanP.style.display='inline-block';
    }
};

你需要理解的是代码的执行时机。

收获园豆:5
linkFly | 菜鸟二级 |园豆:291 | 2015-03-12 11:30

回答得非常详细!我终于明白了 :) 谢谢~

zanetti | 园豆:128 (初学一级) | 2015-03-13 22:41
其他回答(2)
0

oSpanP.style.display=sTxtP!='请选择'?'none':'inline-block';

xujiatao | 园豆:360 (菜鸟二级) | 2015-02-21 22:08
0

var oSelPh=document.getElementById('phase');
var sTxtP=oSelPh.options[oSelPh.selectedIndex].text;

这个代码,要放到onclick中去。

xyzyyj | 园豆:207 (菜鸟二级) | 2015-02-22 13:05

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

支持(0) 反对(0) zanetti | 园豆:128 (初学一级) | 2015-02-22 17:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册