JQuery - Why isn't it working togeder?

When I write this 2 scripts togeder
only one of them works…
What do I need to do to make them both work togeder?

When I write them seperatly they BOTH work… but not togeder :\

					<script>	
						function displayValue() {
						  var singleValues = $("#form2").val();

							$.post("ajax.php", { id: singleValues, count: "3" },
							function(data){
								$("#result3").empty();
								$( "#result3" ).html(data);
							});
						}
						$("#form2").change(displayValue);
						displayValue();
					</script>
					<script>
						function displayVals() {
						  var singleValues = $("#form1").val();

							$.post("ajax.php", { id: singleValues, count: "2" },
							function(data){
								$("#result2").empty();
								$( "#result2" ).html(data);
							});
						}
						$("#form1").change(displayVals);
						displayVals();
					</script>

I managed to partially solve it…

This is what it needs to do…
I’ve got 3 dropdown list
The first one affects the second one
and the second one affects the third one…

for example look at this
“<– Choose this” means that the next dropdown list is based on this option…

this is what it needs to do:

<div id="result1">
<select id="form1" name="mydropdown1">
<option value="">- Choose Job -</option>
<option value="6">Doctor</option> <--- CHOOSE THIS
<option value="5">Engiener</option>
</select>
</div>

<div id="result2">
<select id="form2" name="mydropdown2">
<option value="">- Choose 2 -</option>
<option value="18">Eye doctor</option>
<option value="15">Orthopedist</option> <--- CHOOSE THIS
<option value="19">Gynecologist</option>
</select>
</div>

<div id="result3">
<select id="form3" name="mydropdown3">
<option value="">- Service -</option>
<option value="10">Legs surgey</option>
<option value="20">ETC...</option>
</select>
</div>

I managed to made it work only if I am using the first dropdown list
(with out using the second one)

for example:
Choosing " Doctor" will open on the 2nd list
“Eye Doctor”, “Orthopedist”… etc…

or if I am using the second dropdown list (without using the first one)
for example:
Choosing “Orthopedist” will open on the third list “Legs surgey”… etc…

BUT, if I am choosing some option on the first list
and then the choosing an option on the second list
it wont change anything on the third dropdown list.
why is that happning?

How can I make it work ?
my JQuery code is:


					<script>
						jQuery.noConflict();
						jQuery(document).ready(function($){				
						$("#form2").change(function () {
						  var values = $("#form2").val();

							$.post("ajax.php", { id: values, count: "3" },
							function(data){
								$("#result3").empty();
								$( "#result3" ).html(data);
							});
						});

						$("#form1").change(function () {
						  var singleValues = $("#form1").val();

							$.post("ajax.php", { id: singleValues, count: "2" },
							function(data){
								$("#result2").empty();
								$( "#result2" ).html(data);
							});
						});
						
						});
					</script>

It’s happening because you’re destroying the second select, which also removes the event that was attached to it.
When you then create the second select from the data, no event is attached to that.

What you need is for jQuery to keep a watch out for that second select, so that when it’s added it can automatically reassign the change event to it.
jQuery’s live method will allow you to attach that click event, both now and in the future.

Thank you! its working now :slight_smile:

Something weird is happaning
when ever it loads the “Select” list from the ajax.php file
i dont get the values when I submit the page…
why can’t I get the dropdown list value?

this is what im doing to recive the list:


if (isset($_POST['cat'.$arr['id']]))
{
	$cat = secure($_POST['cat'.$arr['id']]);
	if ($cat !== "")
		mysql_query("INSERT INTO jobinfo (user_id,content, cat_id, catlist_id) VALUES ('".$uid."','','".$arr['id']."','".$cat."')");
}

this is my code on the main PHP file:


echo '<div id="result'.$arr['id'].'">';
echo '<select name="cat'.$arr['id'].'" id = "cat'.$arr['id'].'" style="width:180px;">';
echo '<option value="">- '.$arr['category'].' -</option>';
$select_cat = mysql_query("SELECT * FROM searchcatslist WHERE cat_id='".$arr['id']."'");
while ( $arr_cat = mysql_fetch_array($select_cat) )
{
	echo '<option value="'.$arr_cat['id'].'">'.$arr_cat['category'].'</option>';
}
echo '</select>';
echo '</div>';
if ($arr['sortby'] > 0)
{
	echo '<script>
	$("#cat'.$arr['sortby'].'").live("click", function(event){						
	$("#cat'.$arr['sortby'].'").change(function () {
	var values = $("#cat'.$arr['sortby'].'").val();
';
echo '$.post("ajax_dlists.php", { id: values, count: "'.$arr['tafpos'].'", multiple: "not" },';
echo 'function(data){
$("#result'.$arr['id'].'").empty();
$( "#result'.$arr['id'].'" ).html(data);
});
});
});
</script>';
}

The ajax_dlists.php:

		$sel = mysql_query ("SELECT * FROM searchcats WHERE tafpos='".$count."'");
		if ( $arr = mysql_fetch_array($sel) )
		{
			if ($multiple == "not")
				echo '<select id="cat'.$arr['id'].'" name="cat'.$arr['id'].'" style="width:180px; float: left;">';
			else
				echo '<select id="cat'.$arr['id'].'" name="cat'.$arr['id'].'" style="width:150px; float: left;">';
				
			echo '<option value="">- '.$arr['category'].' -</option>';
			
			
			$query = "SELECT * FROM searchcatslist WHERE sortby = '".$id."' OR ( sortby = '0' AND cat_id='".$arr['id']."' )";
			$result = mysql_query($query);
			
			while ($row = mysql_fetch_array($result))
			{
				echo '<option value="'.$row['id'].'">'.$row['category'].'</option>';
			}
			echo '</select>';