2017-05-04 42 views
0

我试图在Wordpress中使用来自codrops的Contact Form 7插件和this CSS/JS实现自然语言形式。触发器选择自然语言形式的值

它的作用是隐藏选择元素并将其替换为<ul>,并且相对值生成<li>儿童。一切都很好,除了这个特定的脚本确实将.cheched类应用于与所选“值”匹配的<li>元素,但<select>元素未被触发。有没有办法破解触发选定的值?

我只能假设这应“关闭”方法中完成:

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建议我试图执行的代码,但选择的元素不会改变。此处,我已经把jQuery的位收盘方法中:

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

回答

1

它只是恰巧,我只是在寻找利用codrops自然语言形式类似的解决方案。我在原始代码可用的页面的注释部分找到了使用jQuery的答案。它是由名为Jason的用户发布的。

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

在关闭功能,只需更新原始选择元素的值之后,您可以插入下面的代码来触发原始元素的选择:

的jQuery(this.elOriginal).trigger ('选择');

我希望这会有所帮助。

+0

谢谢zensei,我已经看到了Jason的回答,但没有实现它的运气。也许原因是他正在触发* change *状态,而你建议触发* select *。我会尽快给它一个去。谢谢。 –

+0

不幸。我试图添加这样的代码,但选择不会改变: –