简体   繁体   English

选择框在更改时显示div

[英]Select Box Show div on change

I have a select box that directs users to another page when an item is selected. 我有一个选择框,当一个项目被选中时,它会将用户引导到另一个页面。 I would like to show some kind of loading.gif when the user selects an Item, so they know that something is happening. 当用户选择一个项目时,我想显示某种loading.gif,这样他们就知道发生了什么。 Can someone please show me how to accomplish this? 有人可以告诉我如何做到这一点吗?

    <!DOCTYPE html>
<html lang="en">
    <head>


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$("sRedirect").change(function(){
   $("#sRedirect :selected").not(:contains('Click Here To Select')).siblings("img").first().attr('src','loading.gif');
});


</script>

 </head>
<body>

        <div class="titleBar">
            <div class="Logo"><a class ="backBtn" href="javascript:history.back();">    </a><img src="logotop.png"  align="right" />
                    </div>









<br><br>
    <div class="top"><br><br><h2>Step 1<br><br>Choose an Area</h2><br><br>    <div>
    <div class="middle">




<form name=form1>

<select name="URL" id="sRedirect" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value"    onfocus="javascript:toggle();" >
    <option value="" disabled="disabled" selected="selected">Click Here To Select</option>
    <?=$options?>
    </SELECT>
<br>
<img src="" id="myLoadingPicture"/>
</form>




    </div>
</html>

When you start going to another page (more specifically, start unloading a page) then the page is no longer required to respond. 当您开始转到另一个页面(更具体地说,开始卸载页面)时,不再需要该页面进行响应。 Therefore, even if you added an animated GIF (a simple task, just create an image element and append it to the body) there is no guarantee that it will animate, or even show up. 因此,即使您添加了动画GIF(一个简单的任务,只需创建一个图像元素并将其附加到主体上),也无法保证它会设置动画或显示。

仅在设置location.href之前显示一个图像。

<select name="URL" onchange="$('#myLoadingPicture').show(); window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value"    onfocus="javascript:toggle();" >

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM