基于选择字段值加载页面时隐藏DIV

时间:2015-12-17 06:39:22

标签: javascript jquery html

我有以下脚本,根据选择ID值的更改内容,隐藏/显示2个div。这很好。

<script type="text/javascript">
        $(function () {
            $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
        });
    </script>   

我尝试做的是执行相同的操作,不仅在CHANGE上,而且在页面加载时也是如此。所以当我进入页面时,如果FEATURED是值,则正确的DIV将被隐藏并显示。

我尝试了以下操作,但它没有用。

  <script type="text/javascript">
$( document ).ready(function() {
                $("#ue_package").change(function () {
                    if ($(this).val() == "Featured") {
                        $(".image_container").hide();
                        $(".image_container_featured").show();              
                    } else if ($(this).val() == "Standard") { 
                        $(".image_container").show();
                        $(".image_container_featured").hide();              
                    }
                });
            });
        </script>   

5 个答案:

答案 0 :(得分:1)

将toogling定义为函数。注意用元素id选择器替换$(this)并在onchange和body onload中调用该函数,如下所示:

$( document ).ready(function() {
   showHide();
   $("#ue_package").change(function () {
        showHide();
   });
});


function showHide() {
    if ($('#ue_package').val() == "Featured") {
        $(".image_container").hide();
        $(".image_container_featured").show();              
    } else if ($('#ue_package').val() == "Standard") { 
        $(".image_container").show();
        $(".image_container_featured").hide();              
    }
}

答案 1 :(得分:0)

在将change事件绑定到同一文本框后,只需在document.ready事件处理函数中调用/触发change函数。

$("#ue_package").change();

答案 2 :(得分:0)

               $from_mail = "tdiesel.dinpl.com/new";
                /* Email functionality */

                $to = "m.ajinkya@drushti.in";        
                $subject = "Registration Complete";
                $message = "<br><br>Following are the account details.<br><br>";

                $message .= "<table border='1'>";

                $message .= "<tr>";
                $message .= "<td><b>Customer Name :</b></td><td>$dealer_username</td>";
                $message .= "</tr>";

                $message .= "<tr>";
                $message .= "<td><b>Password :</b></td><td>$dealer_password</td>";
                $message .= "</tr>";

                $message .= "</table>";

                $message .= "<br>";    
                $message .= "<br>Regards,<br>";
                $message .= "Team| Trident Diesel Pvt. LTD.<br>";
                $message .= "Web- www.tdiesel.dinpl.com/new<br>"; 
                $message .= "Contact – +91- 20-25290018<br>";                                                
                $headers = "From: $from_mail" . "\r\n";
                $headers .= "MIME-Version: 1.0" . "\r\n";
                $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

                /* Send mail function for Merchant */
                $mail_send = mail($to,$subject,$message,$headers);
                if($mail_send)
                {
                    echo "<script>alert('Sent')</script>";
                }
                else
                {
                    echo "<script>alert('Not Sent')</script>";
                }

答案 3 :(得分:0)

这不起作用buz change事件在任何动作执行时都会触发。

所以有两个选项一:

<script type="text/javascript">
$( document ).ready(function() {
 showHidediv();
            $("#ue_package").change(function () {
               showHidediv();
        });

function showHidediv()
     {
 if ($("#ue_package").val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($("#ue_package").val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
 }
    </script>   

第二种方法:

$( document ).ready(function() {
       $("#ue_package").change();


 $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
 });

For more about change()

答案 4 :(得分:0)

我会建议这一点,因为我改变了一点逻辑,  我将图像放入div中,然后使用活动类。

进入javascript:

$( document ).ready(function() {
            if ($("#ue_package").val() == "Featured") {
                $('.container:eq(0)').addClass('active');
            $('.container:eq(1)').removeClass('active');
        } else if ($("#ue_package").val() == "Standard") { 
                $('.container:eq(0)').removeClass('active');
                    $('.container:eq(1)').addClass('active');
        }
}

进入css:

.container{
  display:none
}

.container.active{
  display:block;
}

进入html:

<div class="container">
  <img class='image_container' src="something"/>1
</div>

<div class="container">
  <img class='image_container' src="something"/>2
</div>
希望能帮助你好运。