How to make multiple Memberstack multi-select fields work on the same page when only one responds? Answered

Post author
Daniel Haas

Hey! I am following the tutorial for having multi-select fields with search: https://www.memberstack.com/scripts/better-select-fields

It works really well. HOWEVER, I need to have 3 of them on the same page, and for some reason, it only works with one input field. Yes, I made sure the attributes were all correct, and even the class was the same.

Does anyone have a fix? I really need like 3 of them on the same page, not just one.

Thank you so much!

Comments

2 comments

  • Comment author
    A J

    Hey Daniel Haas, a simple way to have many multiple select field with search would be to implement this memberscript instead, since you have better options on customizing it and works with profile update forms by default as well.

    But in case, you want to use the Better select memberscript, you can replace the memberscript with the following in the custom code section of your page and see if it helps.

    <!-- 💙 MEMBERSCRIPT #39 v0.1 BODY CODE 💙 BETTER SELECT FIELDS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
    $(document).ready(function() {
        $('[ms-code-custom-select="select-with-search"]').select2();
    });
    </script>
    <script>
    $(document).ready(function() {
      function prefillSelect2() {
        $('#field, #field2, #field3').each(function() {
          var select2Element = $(this);   
          var rawValue = select2Element.val(); 
          var prefilledText = Array.isArray(rawValue) ? rawValue.join(',') : (rawValue || "");
          if (prefilledText) {
            var valuesArray = prefilledText.split(',').map(value => value.trim());
            select2Element.val(valuesArray).trigger('change.select2');
          }
        });
      }
      prefillSelect2();
    });
    </script>
    

    Replace #field, #field2, #field3 with the actual IDs that you give for the select element in each form. Make sure they are unique and replace the IDs in the code with those. Let me know if you still face issues.

    Note: If you want to use this form to store multiple selected values to Memberstack custom field and also show it to users later on, you can check this thread out and customize it further for your use-case. 

    0
  • Comment author
    Daniel Haas

    A J Thank you so much. The other memberstack script you recommended works amazingly--I didn't even know it existed! Everything is working, thanks a ton.

    0

Please sign in to leave a comment.