Jquery Doesn't function

Jquery Doesn't function

本文关键字：function Doesn Jquery      更新时间：2023-09-26

我已经写了这个原因来用jQuery显示和隐藏select组件，但它不起作用，你能告诉我问题在哪里吗？

<html>
<head>
<meta charset='UTF-8' />
    <script  type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Exo:100,200,400">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

这是要显示的CSS部分。隐藏

<style type="text/css">
    .hide {
       display: none;
    }                  
</style>

jQuery代码

<script>
$(document).ready(function () {
    function changeType() {
            if ($("#typeservice").val() == "voice") {
                $("#country").show();
                $("#sgnl").show();
                $("#Operator").hide();
                $("#tech").hide();
            }
            if ($("#typeservice").val() == "data") {
                $("#country").show();
                $("#sgnl").hide();
                $("#Operator").show();
                $("#tech").hide();
            }
            if ($("#typeservice").val() == "Radio") {
                $("#country").show();
                $("#sgnl").hide();
                $("#Operator").hide();
                $("#tech").show();
            }
    }
});
</script>   
</head>
<body> 
    <select id="typeservice" style="width: 100px" onchange="changeType();">
    </select>
    <select id="sgnl" style="width: 100px; ">
    </select>
    <select  id="country" style="width: 100px;">
    </select>
</body>
</html>

但所有选择的组件都出现了，没有显示或动态显示！

在文档就绪功能中，隐藏除typeservice下拉列表之外的所有选择组件。请尝试使用以下代码隐藏文档中的组件。

$(document).ready(function(){
    $("#country").hide();
    $("#sgnl").hide();
    $("#Operator").hide();
    $("#tech").hide();
});

这个问题在这里已经有了一个公认的答案，这只是另一种方法。

我们可以使用jquery 绑定选择下拉列表的onchange事件

注意：最好使用if-else而不是if-ehere

javascript

 $(document).ready(function(){
$(document.body).on('change','#typeservice',function(){
     if ($("#typeservice").val()=="voice") {
    $("#country").show();
    $("#sgnl").show();
    $("#Operator").hide();
    $("#tech").hide();
     }
  else if ($("#typeservice").val()=="data") {
    $("#country").show();
    $("#sgnl").hide();
    $("#Operator").show();
    $("#tech").hide();
     }
   else if ($("#typeservice").val()=="Radio") {
    $("#country").show();
    $("#sgnl").hide();
    $("#Operator").hide();
    $("#tech").show();
      }
});
 });

html

 <select  id="typeservice" style="width: 100px">
    </select>
    <select id="sgnl" style="width: 100px; ">
     </select>
     <select  id="country" style="width: 100px;">
     </select>
相关文章：