how to fire onchange event in chosen prototype javascript select box?
Solution 1
use the "addEventListener" method on the select box object.
EDIT - here's an example:
document.getElementById('selecboxid').addEventListener('change', SomeFunction(), false);
Solution 2
In this line you have used $()
with a class name, which it does not support.
Event.observe($(".chzn-select"),'change', function(){
A class name can be used multiple times so an array is returned from $$()
, here is one way to work with arrays.
$$(".chzn-select").invoke('observe', 'change', function() {
...
});
I haven't used Chosen before; it's instructions say it needs to be setup so you might have to do this outside of the change event.
document.observe('dom:loaded', function() {
$$(".chzn-select").each(function(select) {
new Chosen(select);
});
});
Ramesh Kotha
● 10+ years of experience in object-oriented design, development, deployment and maintenance of Web and JEE applications using process methodologies ● Expert in development of applications using JEE technologies like Java, JSP, Servlets, JDBC, JNDI, and JavaMail ● Expert in developing Angular2 single page applications. ● Expert in developing Google Maps V3 / OpenLayers map based applications. ● Experience in developing and deploying applications using Tomcat, Web Logic. ● Proficiency in Oracle and MySQL ● Expertise in Various IDE’s likes Eclipse and MyEclipse. ● Experience in developing applications using three tier architectural frameworks such as MVC (Model View Controller) and SPRING framework and Hibernate. ● Experience in JQuery, Javascript, DWR, AJAX and XML. ● Experience working extensively on Windows environments ● Worked on all phases of Systems Development life cycle (SDLC) ● Prepared test case scenarios and internal documentation for validation and reporting ● Experienced in User Support and training end users for efficient use of developed applications. ● Strong knowledge of Gang of Four design Patterns like Façade, Singleton, DAO ● Versed with development methodologies namely SDLC
Updated on February 02, 2020Comments
-
Ramesh Kotha over 4 years
I am using chosen prototype for select box. Now i want to fire onchange event on that select box. here is the link for chosen prototype
How to do this. please help me.
<script type="text/javascript" src="/js/Event.simulate.js"></script> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/chosen/chosen.proto.js" type="text/javascript"></script> <div class="side-by-side clearfix" style="margin-bottom:14px;"> <select data-placeholder="Select Loacation" class="chzn-select" tabindex="2" name="source"> <option value="">Select Loacation</option> <option value="">option1</option> <option value="">option2</option> </select> </div> Event.observe($(".chzn-select"),'change', function(){ //alert($(".chzn-select").chosen()); })
-
Ramesh Kotha over 12 yearshi, its not working, can you give me an example with alert please,
-
clockworkgeek over 12 yearsNow that I've read a suitable example I see I was setting it up wrong. Here is a minimal fiddle that works, to get it looking like the official one I had to link to the same CSS but of course you can make your own.
-
Ramesh Kotha over 12 yearshi everything is working fine, but i have two select boxes on the same page, so how to distinguish those?
-
clockworkgeek over 12 yearsGive them each an
id
attribute. -
Ramesh Kotha over 12 yearshi @clockworkgeek i want to update the second select box based on the first select box, can you give me small example please.