显示我选择的选项的弹出基础

时间:2013-07-09 04:59:24

标签: javascript html

我正在尝试使用HTML和Javascript来选择我选择的值。[/ p>

<!DOCTYPE html>
<html>
<body>
 <select id="mysel">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 </select>

 <script>
    $(document).ready(function(){
    $(':input#mysel').live('change',function(){
    var sel_opt = $(this).val();
    alert(sel_opt);
    if(sel_opt==1)
    {
        alert()
    }
     else if(sel_opt==2)
     {
        alert()
     }
      else if(sel_opt==3)
      {
        alert()
      }

    });

 });
   </script>

</body>
</html>

但上面的代码不能以某种方式工作。不知道是什么问题?

更新代码: -

<!DOCTYPE html>
<html>

<body>
 <select id="mysel">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 </select>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">

 $(document).ready(function(){
    $('#mysel').on('change', function(){
        var sel_opt = $(this).val();
        alert(sel_opt);

        if(sel_opt==1)
        {
            alert()
        } 
        else if(sel_opt==2)
        {
            alert()
        }
        else if(sel_opt==3)
        {
            alert()
        }

    });
});

 </script>

</body>
</html>

在添加jQuery库之后,上面的代码仍然无效。知道为什么吗?

5 个答案:

答案 0 :(得分:2)

在jQuery 1.7+中,live函数已被弃用,实际上已在1.9中完全删除。尝试用livebind替换on,它应该可以解决问题。

$(document).ready(function(){
    $('#mysel').on('change', function(){
        var sel_opt = $(this).val();
        alert(sel_opt);

        if(sel_opt==1)
        {
            alert()
        } 
        else if(sel_opt==2)
        {
            alert()
        }
        else if(sel_opt==3)
        {
            alert()
        }

    });
});

演示:http://jsfiddle.net/6NykM/

答案 1 :(得分:0)

如果在html头中包含jQuery库,则代码可以正常工作。测试并使用jQuery的旧变种(jsFiddle上的1.6.4~1.8.3)。

这是一个jsFiddle:http://jsfiddle.net/MbmTF/

答案 2 :(得分:0)

添加Jquery库将解决您的问题 小提琴是here

$(':input#mysel').live('change',function(){
var sel_opt = $(this).val();
alert(sel_opt);
if(sel_opt==1)
{
    alert("It's one");
}
 else if(sel_opt==2)
 {
    alert("It's two");
 }
  else if(sel_opt==3)
  {
    alert("It's three");
  }

});

答案 3 :(得分:0)

您无法将包含行和脚本代码的脚本合并到一个标记中。您需要像这样更改。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
 $(document).ready(function(){
    $('#mysel').on('change', function(){
        var sel_opt = $(this).val();
        alert(sel_opt);

        if(sel_opt==1)
        {
            alert()
        } 
        else if(sel_opt==2)
        {
            alert()
        }
        else if(sel_opt==3)
        {
            alert()
        }

    });
});

 </script>

答案 4 :(得分:-1)

尝试使用switch语句而不是if / else循环以获得更好的可读性。

你遇到的问题是数据类型,获得的类型是字符串,你正在比较int。

 $('#mysel').on('change',function(){
    var sel_opt = $(this).val();
    alert(sel_opt);

switch(sel_opt){
case "1":
alert();
break;
case "2":
alert();
break;
case "3":
alert();
break;
}
    });

检查这个小提琴.. http://jsfiddle.net/S9jkK/1/