I have the following function which hides or shows the input and label of a field depending on the value of a select field:
function handle_select_change(obj) {
var selectField = jQuery(obj);
var selectedValue = selectField.val();
var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');
if (selectedValue !== "multiple-choice") {
textareaField.css("display", "none");
textareaField.siblings().css("display", "none");
} else {
textareaField.val("");
textareaField.css("display", "block");
textareaField.siblings().css("display", "block");
}
}
This function applies for several forms inside the same page.
I am trying to trigger this function as soon as the document is ready so that it verifys the value of the select field in each form.
Inside a document ready function i was calling my function this way:
handle_select_change(jQuery('.cheryr-ui-repeater-content-box select'));
The selector above is an object where each index of the object is a select field. So if i have forms in my page, i will have an object of length 5 being each index the select field to the corresponding form. How can i iterate the object and pass it to my function when it is triggered?
2
Answers
Use a selector to find all the elements, then loop over them to call the function.
Something like so:
First, as a side note, for questions like this PLEASE include your HTML! It’s related to the question and very helpful to answerers
The very first line of your function wraps whatever was passed in with
jQuery(obj)
so when you call it you only need to pass the selector string, like this:You just need to have a change event for the selected elements, and you can also simplify some code by taking advantage of jQuery’s chained events and the
.hide()
and.show()
methods instead of directly setting css display properties.I had to take a guess at some HTML structure since you didn’t include any.