Jquery function in loop

JavaScript
1

Hi again!!I am using the following function to show and hide div based on the user selection.The selection box has functionality to add more selection boxes by pressing add tab.But this function works only if I select the value first time.

<script type="text/javascript">
 $(document).ready(function(){
 $("#select1").change(function(){
    if ($(this).val() == "Ground Transportation" ) {
        $("#hide1").slideDown("fast");

    } else {
        $("#hide1").slideUp("fast");
	}
});
});
</script>


<select name="services[]" id="select1" class="form-select">
  <option value="0">Select</option>
  <option value="Air Transportation">Air Transportation</option>
  <option value="Ground Transportation">Ground Transportation</option>
    <option value="Lodging">Lodging</option>
  <option value="Tours">Tours</option>
  <option value="Railway Transportation">Railway Transportation</option>
  <option value="Other">Other</option>

</select>

Please guide me how can I solve this issue?

2

In a simple test that I have just performed it works every single time for me, which means that there must be something else that’s interfering.
We can determine what that is by taking a look at a test page of yours that exhibits the problem that you’re needing to fix.

3

Ok.Here is part of my code:



<html>
<head>
<script type="text/javascript">
function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
		
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("#select1").change(function(){
    if ($(this).val() == "Ground Transportation" ) {
        $("#hide1").slideDown("fast"); 

    } else {
        $("#hide1").slideUp("fast");  
	}
});
});
</script><style type="text/css">
.hide{display:none;}
</style>
</head>
<body>
<tr>
<td class="forhead"><input type="button" value="Add Row" onClick="addRow('dataTable')"></td>
<table id="dataTable">
       <tr>
           <td> <select name="services[]" id="select1" class="form-select">
  					<option value="0">Select</option>
  					<option value="Air Transportation">Air Transportation</option>
  					<option value="Ground Transportation">Ground Transportation</option>
    				<option value="Lodging">Lodging</option>
  					<option value="Tours">Tours</option>
  					<option value="Railway Transportation">Railway Transportation</option>
  					<option value="Other">Other</option>
				</select>
</td>
            </tr>
</table>

	<div class="hide" id="hide1"><!-- this select box will be hidden at first -->
		Test : <input name="text1" type="text">
    </div>

</form>
</body>
</html>
4

A part of what’s going wrong is that you are using a unique identifier in the area that is being copied. That no longer makes it unique, which tends to break things.

Better instead is for you to use a class name to identify that piece instead, such as “selectService”. Then you can use something like:


$(document).on('change', '.selectService', function () {
    ...
});

Which will allow the function to apply to elements of that same class, even when they are added to the DOM later on.

5

Thanks (again) paul_wilkins. :slight_smile: Really didnt know this can be achieved through jquery.



<script type="text/javascript">
$(document).on('change', '.selectService', function () {
    if ($(this).val() == "Ground Transportation" ) {
        $("#hide1").slideDown("fast"); 

    } else {
        $("#hide1").slideUp("fast");  
	}
});
</script>

works perfect!!