我正在将one的these dropdown effects集成到我的项目中。我想列出一个国家列表，当访问者选择一个国家时，它会将他/她发送到一个页面。问题是，当dropdown.js混在一起时，onChange（）事件将不起作用。CoDrops dropdown onChange事件将不起作用

我试着

onChange='this.form.submit()"

而且随着

onChange='sendForm()" 
... 
<script type="text/javascript"> 
function sendForm() { 
    document.getElementById("destination-select").submit(); 
} 
</script>

如果我删除dropdown.js两个工作，但效果明显丢失。

形式是

<form id="destination-select" action="/" method="get"> 
    <select name="destination" id="cd-dropdown" class="cd-select" onchange="sendForm()"> 
     <option value="-1" selected>Destination</option> 
     <option value="argentina" class="icon-argentina">Argentina</option> 
     <option value="brazil" class="icon-brazil">Brazil</option> 
     <option value="spain" class="icon-spain">Spain</option> 
     <option value="more " class="icon-more">See more</option> 
    </select> 
</form>

UPDATE

由于@Amit指出，有一个onOptionSelect（）方法，我用它，并发现，工作。问题是它不检索选择的选项。 onChange =“sendForm（）”也不onChange =“this.form.submit（）”。我甚至试图用.click（）方法伪造一个点击按钮。有任何想法吗？谢谢！

位的代码：

<form id="destination-select" action="/" method="get"> 
    <select name="destination" id="cd-dropdown" class="cd-select" > 
     <option value="-1" selected disabled>Destination</option> 
     <option value="argentina" class="icon-argentina">Argentina</option> 
     <option value="brazil" class="icon-brazil">Brazil</option> 
     <option value="spain" class="icon-spain">Spain</option> 
     <option value="more" class="icon-more">See more</option> 
    </select> 
</form>

使用Javascript：

$(function() { 
    $('#cd-dropdown').dropdown({ 
     gutter : 5, 
     delay : 100, 
     random : true, 
     onOptionSelect: function(opt){ 
      sendForm(); 
     } 
    }); 
});

sendForm（）

function sendForm() { 
      document.getElementById('destination-select').submit(); 
     }

结果始终是：url.dev/?destination=-1

来源

2016-07-23 Jorge Anzola

确保你有sendForm（）函数离子在你的html之前定义。如果这没有帮助，请试试这个，

您正在使用的jquery下拉插件有一个配置参数“onOptionSelect”。您可以将一个函数传递给此参数，该参数将接收所选选项作为参数。

$("#cd-dropdown").dropdown(
    onOptionSelect: function(opt){ 
     // you can call your sendForm() here 
    } 
);

来源

2016-07-23 18:59:11 Amit

好吧，onOptionSelect工作得很好。但是，现在的问题是它将所选选项设置为“-1”。我的意思是，它不会检索选定的选项，而是检索下拉菜单的默认选项。我试过了： 'document.getElementById（'destination-select'）。submit（）;' 进入onOptionSelect。我也尝试调用sendForm（）方法，甚至用click（）伪造提交按钮。一切结果如下：url？destination = -1 // - 1是默认选项值 –

@JorgeAnzola检查此https://gist.github.com/amitonkare/fcb9e8ea55050f29b1708612d0f2b247 它的工作原理和警报选定的选项。 – Amit

天才！这帮助了我很多。我仍然在形式上遇到一些麻烦，但现在你已经设法弄到了国家，我可以做一些像'window.location.replace（“？destination =”+ destination）;'并且它可以工作。我不知道这是不是一个坏习惯或什么，但工作。谢谢！ –

UPDATE

回答

相关问题