触发自然语言形式的选择值

Question

I'm trying to implement a natural language form in Wordpress using the Contact Form 7 plugin and this CSS/JS from codrops.

What it does is to hide the select elements and replace them with an <ul> , and the relative values generate the <li> childrens. Everything is fine, except that this particular script does apply a .cheched class to the <li> element that matches the selected "value", but the <select> element is not triggered. Is there a way to hack trigger the selected value?

I can only assume that this should be done within the "close" method:

close : function( opt, idx ) {
          if( !this.open ) {
            return false;
          }
          this.open = false;
          this.form.fldOpen = -1;
          this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,'');

          if( this.type === 'dropdown' ) {
            if( opt ) {
              // remove class nl-dd-checked from previous option
              var selectedopt = this.optionsList.children[ this.selectedIdx ];
              selectedopt.className = '';
              opt.className = 'nl-dd-checked';
              this.toggle.innerHTML = opt.innerHTML;
              $(this.elOriginal).change();
              // update selected index value
              this.selectedIdx = idx;
              // update original select element´s value
              this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
            }
          } 
          else if( this.type === 'input' ) {
            this.getinput.blur();
            this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getAttribute( 'placeholder' );
            this.elOriginal.value = this.getinput.value;
          }
        }

Following zensei suggestion I've tried to implement the code, but the select element doesn't change. Here's where I've put the jquery bit inside the close method:

if( this.type === 'dropdown' ) {
            if( opt ) {
              // remove class nl-dd-checked from previous option
              var selectedopt = this.optionsList.children[ this.selectedIdx ];
              selectedopt.className = '';
              opt.className = 'nl-dd-checked';
              this.toggle.innerHTML = opt.innerHTML;
              // update selected index value
              this.selectedIdx = idx;
              // update original select element´s value
              this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
              jQuery(this.elOriginal).trigger('select');
            }
          }

Answer 1

It just so happens that I was just looking for a similar solution using the natural language form from codrops. I found an answer utilizing jquery in the comments section of the page where the original code is available. It was posted by a user named Jason.

https://tympanus.net/codrops/2013/05/21/natural-language-form-with-custom-input-elements/

In the close function, just after updating the original select element's value, you can insert the following code to trigger the selecting of the original element:

jQuery(this.elOriginal).trigger('select');

I hope this helps.