function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sujendran Sundarraj 8Sujendran Sundarraj 8 

onchange event for selectlist using jquery

Hi, 
I have an requirement that I need to pass the value of the selectlist to my controller using jquery, I tried to get the value once it is selected from the list but it is not working. here is my code, can you please help to fix it.
<apex:page controller="selectoptionsz" >
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script>


  <apex:form >
  <apex:selectList id="column1" size="1" value="{!c.Answer__c}">
  <apex:selectOptions value="{!options}" />
  
   </apex:selectList>
  </apex:form>
  <script>
$(document).ready(function(){
alert('success');
$('#column1').change(function(){
alert('test');

});
});
</script>
</apex:page>
Thank you.
regards,
Sujendran
Dushyant SonwarDushyant Sonwar
Hi Sujendra,

Apex tags generate dom ID so your onchange will not bind to your element. You can try giving customclass to your element and use it as css selector.
  
<apex:page  controller="selectoptionz">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script>


  <apex:form >
  <apex:selectList id="column1" styleClass="demoPicklist" size="1" >
           <apex:selectOptions value="{!options}" />
  
   </apex:selectList>
  </apex:form>
  <script>
    $(document).ready(function(){
        alert('success');
        $('.demoPicklist').change(function(){
            alert('test');
    
        });
    });
</script>
</apex:page>

Hope this helps.
Sujendran Sundarraj 8Sujendran Sundarraj 8
Hello Dushyant, 
Thank you so much. Can you please help to pass the selected value to the controller and I my controller I need to query based on the selected value and show the result in another picklist. 
Do you have any documents related to this. 

Thank you once again. 
Regards, 
Sujendran.
Dushyant SonwarDushyant Sonwar
There are many ways to send value in the controller , i am showing the very basic example of sending the value.
Hope this helps.
  
<apex:page  controller="TestPicklistController">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script>



  <apex:form id="frm">
        
        <apex:actionFunction name="callMethod" action="{!doSomething}" reRender="panel">  
            <apex:param assignTo="{!picklistValue}" name="arg1" value=""/>
        </apex:actionFunction>
        
          <apex:outputPanel id="panel">
          Value is : {!picklistValue} <br/>
        </apex:outputPanel>
      <apex:selectList id="column1" styleClass="demoPicklist" size="1" >
               <apex:selectOption  itemLabel="abc" itemValue="abc"/>
                <apex:selectOption  itemLabel="def" itemValue="def"/>      
       </apex:selectList>
  </apex:form>
  <script>
    $(document).ready(function(){
        alert('success');
        $('.demoPicklist').change(function(){
            alert('test ' + $('.demoPicklist').val());
            callMethod($('.demoPicklist').val());
    
        });
    });
</script>

</apex:page>

  
public class TestPicklistController{
    public String picklistValue{get;set;}
    public void doSomething(){
        System.debug(picklistValue + ' Value selected in picklist');
        //Your custom logic what you want to do with this value 
        
    }
}

Hope this will help.
Deepali KulshresthaDeepali Kulshrestha
Hi Sujendran,

try this below code:-
I have done this and it runs fine and change it according to your need.

<apex:page>

    <script>
        function displaydiv(val)

        {
            alert(val);
        }
    </script>

    <apex:form>

        <apex:selectList id="chooseColor" onchange="displaydiv(this.value)" size="1">

            <apex:selectOption itemValue="value1" itemLabel="value 1" />

            <apex:selectOption itemValue="value2" itemLabel="value 2" />

            <apex:selectOption itemValue="value3" itemLabel="value 3" />

        </apex:selectList>

    </apex:form>

</apex:page>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
Ajay K DubediAjay K Dubedi
Hi Sujendran,
Try the below code it works fine for me and let me know if this works for you.
  
<apex:page>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script>
    <apex:form >
        <apex:selectList styleClass="column1" size="1" >
            <apex:selectOption  itemLabel="Contact" itemValue="Con"/>
            <apex:selectOption  itemLabel="Account" itemValue="acc"/>      
        </apex:selectList>
    </apex:form>
    <script>
    $(document).ready(function(){
        alert('success');
    });
    
    $('.column1').change(function(){
        alert('test');
        
    });
    
    </script>
</apex:page>


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi