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
Post a Comment