下拉菜单选项和事件处理程序 [英] Dropdown menu options and event handlers
问题描述
您好，我想创建一个包含3个选项的下拉菜单，它们是动物的名字.当用户选择一个选项并单击一个按钮时，javascript处理一个事件，该事件将产生从下拉菜单到单独的div的选择图像.我希望使用ajax或某些方法动态完成此操作，其中仅div部分得到更新，而无需刷新整个页面.
到目前为止，我有这个:
Hi there I want to create a drop-down menu with 3 options, which are the names of animals. When the user selects an option and clicks on a button, javascript handles an event that produces an image of the selection from the drop-down menu to a separate div. I want this to be done dynamically using ajax or some method where just the div section gets updated without refreshing the entire page.
So far, I have this:
<html>
<head>
<title>Animal Selection</title>
<script type="text/javascript">
function ShowPic()
{
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange=function(){
if(xhttp.readyState==4 && xhttp.status==200){
document.getElementByID("Selection").innerHTML;
if(Selection.innerHTML==Cat){
/*Here I want to find a way to choose the correct picture
and return it to the <div id="Mydiv"></div> section of the
page when i click on the button.*/
else if(...){}
else if (...){}
else
alert("You did not choose an animal");
}
}
</script>
</head>
<body>
<p id="Selection">Choose your Animal
<select>
<option>Cat</option>
<option>Bear</option>
<option>Dog</option>
</select>
<input id="Button1" type="button" önclick="ShowPic()" value="Generate Picture"/>
<div id="Mydiv">
</div>
</body>
</p>
我希望能理解我在这里要做的事情，我从未使用过Ajax，并且正在尝试一些练习.谢谢
I hope it is understood what I''m trying to do here, I''ve never used Ajax, and I''m trying to get some practice. Thanks
推荐答案
尝试使用 ^ ].
jQuery可能会避免许多浏览器不兼容的情况，您可以删除以下内容:
Try doing it using jQuery[^].
jQuery will probably save you from a lot of browser incompatibilities, and you can drop things like:
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
并让 jQuery API [ Google搜索 [
and let the jQuery API[^] handle the differences.
You will find a lot of good samples on how to do what you want:
Google search[^]
Regards
Espen Harlinn
感谢链接，我得到了很多例子，但这并不是我想要的.但是，我想出了解决该问题的解决方案.大声笑所以我在回答我自己的问题.希望它能帮助其他尝试做同样事情的人:)
这是我的修订解决方案:
Thanks for the links, I got a lot of examples, but it was not quite what I was looking for. I however, came up with a solution to the problem which works fine. lol So I''m answering my own question. Hope it helps others who are trying to do the same thing :)
Here is my Revised Solution:
<<pre lang="xml">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Animal Selection</title>
<script type="text/javascript">
function showPic() {
var chooseAnimal = document.getElementById("animal").value;
if (chooseAnimal == "Cat") {
document.getElementById("myPic").innerHTML = " <img src = ''http://t0.gstatic.com/images?q=tbn:ANd9GcSKN4UpExewXx7AgEtyRWyCwY34Y_U10gbg-HprbpidD8buZ4cqkg'' alt=''cat.jpg'' />";
}
if (chooseAnimal == "Bear") {
document.getElementById("myPic").innerHTML = " <img src = ''http://t2.gstatic.com/images?q=tbn:ANd9GcTUaliB3wKHJhjlc6_uS_cgNcL-SxByiSbJ4N9KdraZPNieaXvdng'' alt=''bear.jpg''/>";
}
if (chooseAnimal == "Dog") {
document.getElementById("myPic").innerHTML = " <img src = ''http://t0.gstatic.com/images?q=tbn:ANd9GcQdz7CXHq2_AdNjJ1i8K6sg_KI_bcYU27qIGfrhClRZ0pGzCTvy'' alt= ''dog.jpg''/>";
}
}
</script>
</head>
<body>
<form id="form1" runat= "server">
<div>
<p>Choose your Animal
<select id="animal">
<option>Cat</option>
<option>Bear</option>
<option>Dog</option>
</select>
</p>
<input id="Button1" type="button" onclick="showPic()" value="Generate Picture" /><br />
<label id= "myPic"></label>
</form>
</body>
</html>
这样完全可以实现我想要的效果.唯一的是我更改了< div>部分放入< label> .
PS:src图像是链接位置，您始终可以更改为所需的图片.事实证明，这也是一项真正的简单任务.
享受吧！
So that works exactly how I wanted it to. The only thing is I changed the <div> section into a <label> .
PS: the src images are link locations, you can always change into your desired picture. This turned out to be a real easy and simple task too.
Enjoy!
这篇关于下拉菜单选项和事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
