首页 新闻 会员 周边

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

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 | 初学一级 |园豆：91 | 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
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。