Search jQuery

jQuery Forum

Getting Started

surendarmx

On select a image in dropdown

in Getting Started • 10 years ago

Hi,

I am new to JQuery, please help in resolving the following issue that I am facing,

If I click the above arrow, the following images will be displayed as a dropdown

Here I want to select an image by click the same and that selected image should replace the dropdown arrow.

Please help me in this problem

Thanks in advance.
:)

Suren

Replies(4)

noth1ng

Re: On select a image in dropdown

10 years ago

Could you give us some piece of html? Just for helping you easily.

surendarmx

Re: On select a image in dropdown

10 years ago

Thanks for your reply, this is my html with script,

<script type="text/javascript">
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');

if(X==1)
{
$("#tabs").hide();
$(this).attr('id', '0');
}
else
{

$("#tabs").show();
$(this).attr('id', '1');
}

});

//Mouseup textarea false
$("#tabs").mouseup(function()
{
return false;
});
$(".account").mouseup(function()
{
return false;
});

//Textarea without editing.
$(document).mouseup(function()
{
$("#tabs").hide();
$(".account").attr('id', '');
});

});

</script>
</head>

<a class="account"> <img width="7px" height="7px"
src="logos/arrow.png" /> </a>

<div id="tabs" style="display: none;">

<table>
<tr>
<td><a href="#"><img width="16px" height="16px"
src="logos/1.gif" onclick="this.src='logos/1.gif';" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/2.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/3.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/4.gif" /> </a></td>
<td><a href="#"><img width="16px" height="16px"
src="logos/21.gif" onclick="this.src='logos/1.gif';" /> </a></td>

</tr>
</table>

<table>
<tr>
<td><a href="#"><img width="16px" height="16px"
src="logos/5.gif" onclick="this.src='logos/1.gif';" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/6.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/7.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/8.gif" /> </a></td>
<td><a href="#"><img width="16px" height="16px"
src="logos/22.gif" onclick="this.src='logos/1.gif';" /> </a></td>

</tr>
</table>
<table>
<tr>
<td><a href="#"><img width="16px" height="16px"
src="logos/9.gif" onclick="this.src='logos/1.gif';" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/10.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/11.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/12.gif" /> </a></td>
<td><a href="#"><img width="16px" height="16px"
src="logos/23.jpg" onclick="this.src='logos/1.gif';" /> </a></td>

</tr>
</table>
<table>
<tr>
<td><a href="#"><img width="16px" height="16px"
src="logos/13.gif" onclick="this.src='logos/1.gif';" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/14.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/15.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/16.gif" /> </a></td>
<td><a href="#"><img width="16px" height="16px"
src="logos/24.gif" onclick="this.src='logos/1.gif';" /> </a></td>

</tr>
</table>
<table>
<tr>
<td><a href="#"><img width="16px" height="16px"
src="logos/17.gif" onclick="this.src='logos/1.gif';" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/18.gif" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/19.png" /> </a></td>

<td><a href="#"> <img width="16px" height="16px"
src="logos/20.png" /> </a></td>
<td><a href="#"><img width="16px" height="16px"
src="logos/17.gif" onclick="this.src='logos/1.gif';" /> </a></td>

</tr>
</table>
</div>

noth1ng