Next Element

**wow** · 07-22-2012 01:12 PM

Hi there,

The code below tries to display the price input box when its previous select changes to "Party Menu" and the price box will be disappeared when its select is changed to "Regular Menu". But it does nothing when the select is changed. Can you help correct the JavaScript code?

Thanks,

Code:

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test Next</title>

<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("select#mType").change(function() {
		if ($(this).options[$(this).selectedIndex].val()=='P') {
			$(this).next('span').css('display', 'inline');
		} else {
			$(this).next('span').css('display', 'none');
		}
	});
});
</script>

<style type="text/css">
.mPrice {
	display: none;
}
</style>
</head>

<body>
<form method="post" action="restt.php" id="fRest">

<table cellSpacing=0 cellPadding=1 border=0>
  <tbody align="left">
  <tr><td><select class="mType" name="mType1">
	<option selected="selected" value="R">Regular Menu</option>
	<option value="P">Party Menu</option></select>&nbsp;&nbsp;
	<span class="mPrice" id="prce1">Price:<input type="text" name="prce1" value="" size="8" maxlength="8"/>&nbsp;&nbsp;</span>
	Delete<input type="checkbox" name="md1" value="d"/></td></tr>
  <tr><td><select class="mType" name="mType2">
	<option selected="selected" value="R">Regular Menu</option>
	<option value="P">Party Menu</option></select>&nbsp;&nbsp;
	<span class="mPrice" id="prce2">Price:<input type="text" name="prce2" value="" size="8" maxlength="8"/>&nbsp;&nbsp;</span>
	Delete<input type="checkbox" name="md2" value="d"/></td></tr>
   <tr><td><select class="mType" name="mType3">
	<option selected="selected" value="R">Regular Menu</option>
	<option value="P">Party Menu</option></select>&nbsp;&nbsp;
	<span class="mPrice" id="prce3">Price:<input type="text" name="prce3" value="" size="8" maxlength="8"/>&nbsp;&nbsp;</span>
	Delete<input type="checkbox" name="md3" value="d"/></td></tr>
 </tbody></table>
 </form>
</body></html>

**xelawho** · 07-22-2012 01:29 PM

seems to me you are referencing your elements wrong. also bear in mind that you can just use val() to get the value of a select:

Code:

<script type="text/javascript">
$(document).ready(function() {
	$(".mType").change(function() {
		if ($(this).val()=='P') {
			$(this).next('span').css('display', 'inline');
		} else {
			$(this).next('span').css('display', 'none');
		}
	});
});
</script>

**xelawho** · 07-22-2012 01:34 PM

or (a little more succinctly):

Code:

<script type="text/javascript">
$(document).ready(function() {
	$(".mType").change(function() {
			$(this).next('span').css('display', $(this).val()=='P'?'inline':'none');
	});
});
</script>

**wow** · 07-22-2012 01:45 PM

Wonderful, both work. Thanks so much for your quick help, xelawho

Thread: Next Element

Thread Tools

Display

Next Element

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions