Question

我尝试使用Contact Form 7插件和来自codrops的this CSS/JS在Wordpress中实现自然语言表单。

它的作用是隐藏选择元素并用<ul>替换它们，相对值生成<li>个孩子。一切都很好，除了这个特定的脚本确实将.cheched类应用于匹配所选＆＃34;值＆＃34;的<li>元素，但不会触发<select>元素。有没有办法破解触发选定的值？

我只能假设这应该在＆＃34;关闭＆＃34;方法：

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;
          }
        }

根据zensei的建议，我已尝试实施代码，但select元素并未发生变化。在这里，我将jquery位放在close方法中：

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

恰巧我正在寻找使用来自codrops的自然语言形式的类似解决方案。我在原始代码可用的页面的评论部分找到了一个利用jquery的答案。它由名为Jason的用户发布。

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

在close函数中，在更新原始select元素的值之后，您可以插入以下代码来触发原始元素的选择：

的jQuery（this.elOriginal）.trigger（ '选择'）;

我希望这会有所帮助。

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

1 个答案: