0

我正在尝试根据我使用 HTML 和 Javascript 选择的值创建一个弹出窗口。

<!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 库后，上面的代码仍然无法正常工作。知道为什么吗？

4

5 回答 5

2

在 jQuery 1.7+ 中， live 函数已被弃用，实际上在 1.9 中被完全删除。尝试用 or 替换live，bind它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/

于 2013-07-09T05:24:06.507 回答
0

如果您在 html 头中包含 jQuery 库，您的代码就可以工作。经过测试并与 jQuery 的旧变体一起使用（jsFiddle 上的 1.6.4 ~ 1.8.3）。

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

于 2013-07-09T05:12:34.423 回答
0

添加一个 Jquery 库将解决您的问题 Fiddle 在这里

$(':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");
  }

});
于 2013-07-09T05:21:45.680 回答
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>
于 2013-07-09T08:25:34.843 回答
-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/

于 2013-07-09T05:03:39.433 回答