jQuery change element on select - global script for multiple select inputs

Question

I am creating a form builder script. I have a select input where the user can select the form element they want to use, depending on their selection ("select", "checkbox" or "radio") another form field is displayed allowing users to input their options.

Users can create as many instances of form elements as they want, so each select input has a dynamically created id that corresponds to the id of the hidden form field. I then use jQuery to determine whether the "options" field should be hidden or not (triggered on change of the form elements select input).

Currently, for every instance, I have the following code addedabove the select input:

<script>
  jQuery(document).ready(function($) {
    var arr = ['select', 'checkbox', 'radio'];
    var thisForm = 'select.input-type-118';

    function showHideSelect() {
      var val = $(thisForm + ' option:selected').val();
      var selectOptions = $('#select-options-118')

      if (arr.indexOf(val) >= 0) {
        selectOptions.show();
      } else {
        selectOptions.hide();
      }
    }

    showHideSelect();

      $(thisForm).change(function() {
        showHideSelect();
      });

  });

</script>

Where var thisForm and var selectOptions are added dynamically and refer to the select option below this script.

I'm wondering if there is a better way to do this rather than repeat several instances of this, at the moment, a users page cold look like this:

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

...etc...etc

My concern is that I don't think it's best practice to have so many instances of the same script, but I'm unsure how to write a global script that will allow me to show/hide the textarea on an individual basis.

I have shown a more accurate depiction of my workings on this jsfiddle here: https://jsfiddle.net/46stb05y/4/

Rajshekar Reddy · Accepted Answer · 2016-03-03 08:02:16Z

1

You can use Event Delegation Concepts. https://learn.jquery.com/events/event-delegation/

With this you can change your code to

$(document).on('change','select',function() { //common to all your select items
    showHideSelect($(this));  // passing the select element which trigerred the change event
  });

This will work even on the select items that are added dynamically

You must change your function to receive the element as the parameter.

    function showHideSelect($selectElement) {      
    var val = $selectElement.val();
    var selectOptionsId =  $selectElement.attr('class').replace('input-type','select-options');
    var selectOptions = $("#"+selectOptionsId);

    if (arr.indexOf(val) >= 0) {
      selectOptions.show();
    } else {
      selectOptions.hide();
    }
  }

Here is the Working JsFiddle

edited Mar 3, 2016 at 8:02

answered Mar 3, 2016 at 7:33

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sam Skirrow Over a year ago

Thanks @Reddy. So the top script, do I repeat that for every instance and then just have one instance of the function?

Rajshekar Reddy Over a year ago

No, even the top script is one time.

Sam Skirrow Over a year ago

Just added to my JSFiddle and doesn't seem to work - perhaps I've added it wrong? jsfiddle.net/46stb05y/5

Rajshekar Reddy Over a year ago

@SamSkirrow I have updated my answer and linked to jsfiddle have a check

Sam Skirrow Over a year ago

that looks great, although, how would I hide the ".select-options" when the page first loads? Should I just do this using CSS?

|

Collectives™ on Stack Overflow

jQuery change element on select - global script for multiple select inputs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related