javascript - Jquery On change array ID -


i have multiple selector on loop in php code

var new_acc =  $("div[id^=new_acc]").hide();  (var = 1; <= 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 click on change selctor id = reason_change[2] wanna show id="new_acc[2]" showing

your js doesn't need loop , doesn't need reference individual element ids, because can select of select elements @ once , bind single change handler them, within handler use this reference changing element , (dom navigation method) .next() associated div element:

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

if wanted make div shown when values selected in select element, , hidden otherwise, can this:

var new_acc =  $("div[id^=new_acc]").hide();  $("select[id^=reason_change]").change(function() {    if(this.value === "2") {  // show if option 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>


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -