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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.