CODEWITHSUNDEEP
javascriptphpjqueryhtml
Army
Army

Reputation: 33

Jquery On change array ID

I have multiple selector on loop in php code 

var new_acc =  $("div[id^=new_acc]").hide();
for (var i = 1; i <= id; i++) {
	$('#reason_change\\['+id+'\\]').change(function(e) {
		
		  $( "#reason_change\\["+id+"\\] ").show();
	
	});

  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
	<option value="0">--0000--</option>
	<option value="1">--0001--</option>
	<option value="2">--0002--</option>												 
</select>

<div class="field" id="new_acc[1]">
	<label>Account</label>
	<input type="text" name="account_cus[1]"  id="account_cus[1]" value="">
</div>

<select name="reason_change[2]" id="reason_change[2]" >
	<option value="0">--0000--</option>
	<option value="1">--0001--</option>
	<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
	<label>Account</label>
	<input type="text" name="account_cus[1]"  id="account_cus[2]" value="">
</div>

if i click on change my selctor id = reason_change[2] i wanna show id="new_acc[2]" showing

Upvotes: 0

Views: 627

Answers (2)

user7110739
user7110739

Reputation: 

var new_acc =  $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
  if($(this).val() === "2"){
    $(this).next().show();
  } else {
   $(this).next().hide();
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
  <option value="">--Select--</option>
	<option value="0">--0000--</option>
	<option value="1">--0001--</option>
	<option value="2">--0002--</option>												 
</select>

<div class="field" id="new_acc[1]">
	<label>Account</label>
	<input type="text" name="account_cus[1]"  id="account_cus[1]" value="">
</div>

<select name="reason_change[2]" id="reason_change[2]">
  <option value="">--Select--</option>
	<option value="0">--0000--</option>
	<option value="1">--0001--</option>
	<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
	<label>Account</label>
	<input type="text" name="account_cus[1]"  id="account_cus[2]" value="">
</div>

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

Your JS doesn't need the loop and doesn't need to reference the individual element IDs, because you can select all of the select elements at once and bind a single change handler to them, then within the handler use this to reference the changing element and (DOM navigation method) .next() to get its associated div element:

$("select[id^=reason_change]").change(function() {
  $(this).next().show();
});

If you wanted to make it so that the div is only shown when certain values are selected in the select element, and hidden otherwise, you can do something like this:

var new_acc =  $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
  if(this.value === "2") {  // show only if certain option is selected
    $(this).next().show();
  } else {
    $(this).next().hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
	<option value="0">--0000--</option>
	<option value="1">--0001--</option>
	<option value="2">--0002--</option>												 
</select>

<div class="field" id="new_acc[1]">
	<label>Account</label>
	<input type="text" name="account_cus[1]"  id="account_cus[1]" value="">
</div>

<select name="reason_change[2]" id="reason_change[2]" >
	<option value="0">--0000--</option>
	<option value="1">--0001--</option>
	<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
	<label>Account</label>
	<input type="text" name="account_cus[1]"  id="account_cus[2]" value="">
</div>

Upvotes: 1

Related Questions