0

I am trying to create a select 2 dropdown on a VF page but not able to assign and get the selected value. If anyone could guide,how to achieve this. It would be really helpful. I have not included the controller here. Below is the code for vf page, I am trying to implement:

<apex:page standardController="User_Territory__c" extensions="Reorder_UserTerritoriesExtention" sidebar="false" standardStylesheets="false" docType="html-5.0" >
<head>
    <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css"/>
    <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <style type="text/css">

        body {


        }
    </style>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js" />
<apex:includeScript value="{!URLFOR($Resource.jquery, '/scripts/jquery-1.4.3.min.js')}"  />


        <script>

        $(document).ready(function() { $("#select2").select2(); });

    </script>

</head>

<body>
    <script >
    $(document).ready(function(){

          alert('Hello, jQuery');

    function  onSave(){
        var selectedvlaue= $("option:selected")[1].value;
        alert(selectedvlaue);
        Callserver(selectedvlaue);
    }

    </script>      


    <apex:pageBlock title="UserTerritories">

        <apex:pageBlockSection > 
            <apex:form >

                User:<apex:inputField value="{!User_Territory__c.User__c}"/>
                <p>Select Territory Name:</p>
                    <select id="select2" style="width:300px" placeholder="Please select a value" >
                    <option value="">Please Select a Value</option>
                     <apex:repeat value="{!Territories}" var="Territory" id="theRepeat">
                         <apex:selectOption value="{!Territories[Territory].Name}">{!Territories[Territory].Name}</apex:selectOption>
                    </apex:repeat>
                </select>

                <apex:actionFunction name="Callserver" action="{!setTerritoryValue}">
                    <apex:param name="valueSelected" id="selectedvalue" value=""/>
                </apex:actionFunction>

                <apex:outputText id="out" value="{!selectedvalue}"/>
                <apex:pageBlockSectionItem >

                    <apex:commandButton value="Save" onclick="onSave()"  />
                </apex:pageBlockSectionItem>

            </apex:form>    
        </apex:pageBlockSection>

    </apex:pageBlock>

</body>

  • Why don't you use apex:select instead of html select – Reshma Jan 7 at 5:16
  • i tried applying select 2 styling to apex:selectlist, it did not work. – SKSFDC Jan 7 at 5:29
  • Hi All Any suggestions how to handle this scenario? – SKSFDC Jan 7 at 15:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.