JavaScript - Simple Drop Down Div Help!

Hello everyone!

So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it!

Code:

// JavaScript Document

var posX;
var posY;
var element;

function drag(event) {
	element = document.getElementById("square");
	posX = event.clientX;
	posY = event.clientY;
	element.addEventListener("mousemove", move, false);
}

function move(event) {
	
	if (typeof(document.getElementById("square").mouseup) == "undefined")
		element.addEventListener("mouseup", drop, false);
	//Prevents redundantly adding the same event handler repeatedly
	
	element.style.left = event.clientX - posX + "px";
	element.style.top = event.clientY - posY + "px";
}

function drop() {
	element.removeEventListener("mousemove", move, false);
	element.removeEventListener("mouseup", drop, false);
}

the html is a simple (position is set to relative):

<p id="square" onmousedown="drag(event)">meep</p>

Lastly, and most importantly, thank you all for your time =]

EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library.

I imagine this would be very simple for someone who knows javascript.

I want to have three fields.

First field is "posted speed limit", second field is "actual speed" and third field will be the output field.

All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however.

So, 5 miles over the speed limit would be $100 (minimum value)
15 miles over the speed limit would be $150 (add a zero)
35 miles over the speed limit would be $350.
etc.

I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean

Hello there, CodingForums.com!

I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist!

Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs.

Take a look at it he

http://www.projectvoid.co.uk/

I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp).

Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage).

The only piece of code I've found that might help is this:

Code:

function setSelect(name1, name2) 
{

var select1 = document.forms.formname.elements[name1];
var select2 = document.forms.formname.elements[name2];

select1.selectedIndex = select2.selectedIndex;

}

I am also unsure how to utilize it.

I look forward to your aid! Thank you in advance.

Okay, I'm having some trouble getting my head around how to do this..

Code:

<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select>
<option value="Rhino">Rhino</option>
<option value="Bird">Bird</option>
<option value="Rooster">Rooster</option>
</select>

<select>
<option value="0202A">Rhino - Text</option>
<option value="0203A">Rhino - Text2</option>
<option value="0204A">Bird - Text1</option>
<option value="0205A">Bird - Text2</option>
<option value="0202B">Rhino - Text</option>
<option value="0204B">Rhino - Text2</option>
<option value="0204C">Rooster - Text1</option>
<option value="0205C">Rooster - Text2</option>
<option value="0206C">Rooster - Text3</option>
</select>

So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down.

Just can't figure this out. >.<

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!


Thank you for any help and/or advice in advance,
Best Regards,
Tim

Hello,

Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html

This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so.

Code:

    SList.getSelect = function (slist, option) {
        document.getElementById('scontent').innerHTML = ''; // empty option-content

        if (SList[slist][option]) {
            // if option from the last Select, add text-content, else, set dropdown list
            if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
            else {
                var addata = '<option>- - -</option>';
                for (var i = 0; i < SList[slist][option].length; i++) {
                    addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
                }

                // cases for each dropdown list
                switch (slist) {
                    case 'slist2':
                        document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
                        document.getElementById('slist3').innerHTML = '';
                        break;
                    case 'slist3':
                        document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
                        break;
                }
            }
        } else {
            // empty the tags for select lists
            if (slist == 'slist2') {
                document.getElementById('slist2').innerHTML = '';
                document.getElementById('slist3').innerHTML = '';
            } else if (slist == 'slist3') {
                document.getElementById('slist3').innerHTML = '';
            }
        }
    }

I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies.

Or do I simply need to make another big list to do them all?

Best Regards,
Tim





Reply With Quote




03-21-2013, 06:35 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period.

I would certainly toss out your entire getSelect() function and rewrite it.

But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point.

If that's what you are asking, one possible way:
Code:

    SList.slist2 = {
        ...
        "United Kingdom" : 
             { "England" : ["Staffordshire", "Derby", ... ],
                "Scotland" : ["Edinburgh", ... ],
                "Wales" : [ ... ],
                "Northern Ireland" : [ .... ]
             },
       ...
    };

I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting?

I'm still not quite sure if I'm posting in the right place! I was using FireFox to design a page with a drop down box to select four different links. the script works just fine in FireFox but does nothing in IE8. Does anyone have any suggestions???

Script:

<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Choose a destination...</option>
<option value="./Marrgolf_european_open.html">European OPEN</option>
<option value="./Marrgolf_US_open.html">U.S. OPEN</option>
<option value="./Marrgolf_masters.html">MASTERS</option>
<option value="./Marrgolf_PGA.html">PGA</option>
<option value="./Blank_page.html">Reserved</option>
</select>
</form>

Hello, I have a drop down box, which display an images. It is also saved through a cookie on what option you leave it on. Is there a way you can make it so there are several drop downs on the same page that will also display images corresponding to the option chosen?

Here's a live example: www.cirula.com/options

here is my coding
Code:

<script language="javascript">

function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.google.com"
mylinks[1]="http://www.ebay.com"
mylinks[2]="http://www.yahoo.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>


</head>
<body  onLoad="setDefaultValues()">
<div align="center"> 

<form name="mygallery">
<p><select name="picture" onChange="showimage(); setCookie(this.name,this.selectedIndex)" size="1"> 
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>
<p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://www.cirula.com/images/google.png" name="pictures" width="150"
height="150" border=0></a>

I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that?

Code:

function toggle() {
	var ele = document.getElementById("dropdown-items");
	var text = document.getElementById("dropdown-menu");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
}

Hello,

I need your help.

I have the following drop-down box as an example:

[== FRUITS ==]
apples
oranges
pairs
kiwi
lemon

How can I use the code below to set the value of the drop down without knowing its value number (3)?

document.getElementById('BOX1').value = 'pairs'

Much thanks and appreciation for everyones help.

Cheers,

J

Hi All,
I am using this code to populate a drop down list from mysql database.
I need to pass id and name through this code.but the problem is the value is lost when the page gets refreshed.and it works fine if i pass only name through it.
my code is as follows:
PHP Code:
<?PHP
$query=mysql_query("SELECT * FROM client_master WHERE client_status=1");?>
<select name='name' onChange='javascript:form_submit();' style='width:80px'>
<option value="">-SELECT-</option>
<?php
while($row=mysql_fetch_array($query))
{
$name=$row['client_name'];
?>
<option value="<?php echo $row['client_id'] ?>" <?php echo($row['client_name']==$_POST['name'])?'selected':''?>>
<?php echo $row[client_name];?>
</option>
<?php
}
?>
</select>
<script language="javascript">
function form_submit(){
    document.gr.submit();
}
</script>

Hey complete beginner to javascript here so sorry if I'm doing something stupid

Basically I've tried to follow this guide to make it so that I can move an image on the page.

I have a style tag in the head

Code:

<style type="text/css">.drag{position: relative;}</style>

I have an image like this:

Code:

<img src="logo.png" class="drag" alt="logo" />

which is obviously in the body

I copied and pasted the code given in the guide:

Code:

<script language="JavaScript" type="text/javascript">
<!--
var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier


InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	// IE is retarded and doesn't pass the event object
	if (e == null) 
		e = window.event; 
	
	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	
	_debug.innerHTML = target.className == 'drag' 
		? 'draggable element clicked' 
		: 'NON-draggable element clicked';

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || 
		e.button == 0) && 
		target.className == 'drag')
	{
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;
		
		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);
		
		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;
		
		// we need to access the element in OnMouseMove
		_dragElement = target;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;
		
		// cancel out any text selections
		document.body.focus();
		
		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };
		
		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';	
}

function OnMouseUp(e)
{
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;
		
		_debug.innerHTML = 'mouse up';
	}
}
//-->
	</script>

I have tried putting the javascript in the head and the body but no matter where I put it, I can't drag and drop the image. What am I doing wrong?

Thank you for your time

I have tried many time to make the calculation to appear at the total text box. however, I fail to find where the problem is. Please help me..

here is my coding..

<html>
<head>

<title>
PRESENTATION EVALUATION FORM
</title></head>

<style type="text/css">
.style1 {
text-align: center;
}
</style>

<script type="text/javascript">

function add($g1,$g2,$g3,$g4,$g5,$g6,$g7,$g8,$g9,$g10,$g11,$g12,$g13)
{
$g1=$_POST['document.myForm.gred1.value'];
$g2=$_POST['gred3.value'];
$g3=$_POST['gred3.value'];
$g4=$_POST['gred4.value'];
$g5=$_POST['gred5.value'];
$g6=$_POST['gred6.value'];
$g7=$_POST['gred7.value'];
$g8=$_POST['gred8.value'];
$g9=$_POST['gred9.value'];
$g10=$_POST['gred10.value'];
$g11=$_POST['gred11.value'];
$g12=$_POST['gred12.value'];
$g13=$_POST['gred13.value'];

$total=$g1+$g2+$g3+$g4+$g5+$g6+$g7+$g8+$g9+$g10+$g11+$g12+$g13;
}


</script>

<body>

<center><img src="logo.gif" height="200" weight="240"></center>
<p><center><b>FAKULTI SISTEM KOMPUTER & KEJURUTERAAN PERISIAN<br>UNIVERSITI MALAYSIA PAHANG</b></center></p>




<table width="100% "border="1">
<form name="myForm" method="post">


<tr>
<th style="width: 447px">ITEM</th>
<th style="width: 340px">SCORE</th>
</tr>



<tr>
<td style="width: 447px">&nbsp;A) SLIDES</td>
<td style="width: 340px"> </td>
</tr>



<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i.
Use of Diagram and Animations
</td>
<td style="width: 340px" class="style1">
<select name="gred1" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</tr>



<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ii. Layout, Font and Color (Readable, Consistent, Attractive)
</td>
<td style="width: 340px" class="style1">
<select name="gred2" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</tr>



<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; iii. Content Structure</td>
<td style="width: 340px" class="style1">
<select name="gred4" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
</tr>


<tr>
<td style="width: 447px; height: 28px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; iv. Slide Content</td>
<td style="width: 340px; height: 28px;" class="style1">
&nbsp;<select name="gred3" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></tr>


<tr>
<td style="width: 447px">&nbsp; B) PRESENTATION</td>
<td style="width: 340px"></td>
</tr>


<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i. Explaining and
Not Reading The Slides </td>
<td style="width: 340px" class="style1">
<select name="gred5" onchange="add()" style="width: 45px; height: 22px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ii. Voice, Eye Contact and Gestures</td>
<td style="width: 340px" class="style1">
<select name="gred6" onchange="add()" style="width: 45px; height: 22px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp; iii. Capture Audience Interest</td>
<td style="width: 340px" class="style1">
<select name="gred7" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp; iv. Proper Introduction and Closing</td>
<td style="width: 340px" class="style1">
<select name="gred8" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
</tr>


<tr>
<td style="width: 447px">&nbsp; C) LANGUAGE</td>
<td style="width: 340px" class="style1">&nbsp;</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i. Fluency
</td>
<td style="width: 340px" class="style1">
<select name="gred9" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
</tr>


<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ii. Correctness</td>
<td style="width: 340px" class="style1">
<select name="gred10" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp; iii. English Vocabulary</td>
<td style="width: 340px" class="style1">
<select name="gred11" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;D) QUESTION AND ANSWER HANDLING</td>
<td style="width: 340px" class="style1">&nbsp;</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i. Confidence</td>
<td style="width: 340px" class="style1">
<select name="gred12" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</tr>

<tr>
<td style="width: 447px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ii. Logic Responds</td>
<td style="width: 340px" class="style1">
<select name="gred13" onchange="add()" style="width: 45px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</tr>



<tr>
<td style="width: 447px; height: 27px;"><center><b>Total</b></center></td>
<td style="width: 340px; height: 27px;"><center>
<input name="totalmark" type="text" style="width: 52px" value="0" >
<?php echo $_POST["$total"];></center></td>
</table>



<table>
<tr>
<td class="style1" style="width: 802px"><br><input type="button" name="total" value="CALCULATE" onclick= "add()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="RESET" value="RESET"></td>
</tr>
</form>
</table>
</body>
</html>

Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this:

HTML and Javascript included below.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

<link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="nav">

<li><a href="/home/">Home </a></li>
<li><a href="/products/">Products </a>

<ul>

<li><a href="/products/silverback/">Silverback </a></li>
<li><a href="/products/fontdeck/">Font Deck </a></li>

</ul>

</li>

<li><a href="/services/">Services </a>

<ul>

<li><a href="/services/design/">Design </a></li>
<li><a href="/services/development/">Development </a></li>
<li><a href="/services/ consultancy/">Consultancy </a></li>
</ul>

</li>

<li><a href="/contact/">Contact Us </a></li>

</ul>



</body>
</html>

i have done dropdown menu dynamic using php in which data fetched from database(mysql).now i've to do that if i'll choose any option from dropdown menu that particular item's rate will also fetch from data base and display in a text box.that value can also be changed.plzz help me .give some idea.