将Select2下拉框的选定值传递给控制器

Question

Problem: 问题：

I am having trouble getting the selected value from a Select2 drop down and passing it to the controller. 我无法从Select2下拉列表中获取所选值并将其传递给控制器。 The drop-down gets populated with about a hundred names so Select2 is a great way to find the name needed. 下拉列表中填充了约一百个名称，因此Select2是查找所需名称的好方法。

I've trimmed the code from my page to just have a few names and the single value in the controller. 我已经从页面中整理了代码，使其仅包含几个名称和控制器中的单个值。

UPDATE I have added to the JavaScript, where it should pass the text value of the selected name to the apex:ActionFunction however it does not seem to be working. 我已经在JavaScript中添加了UPDATE ，它应该将所选名称的文本值传递给apex：ActionFunction，但是它似乎不起作用。

Visual Force Page: 视觉力页面：

<apex:page controller="playGround2Controller"  standardStylesheets="false" docType="html-5.0" showHeader="false">

<head>
    <!-- stylesheets -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css"/>
    <style type="text/css">
        body {
        padding: 40px;
        }
    </style>

    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js"></script>
    <script>
    $(document).ready(function() { 
        //  var $eventSelect = $("selStudent");
        var nameArray = [{id:1,text:'Bob'}, {id:2,text:'Joe'}, {id:3,text:'Alex'} ];

        $("#selStudent").select2({ 
            data: nameArray, 
            placeholder: "Student",
        }); 
        var $eventSelect = $("#selStudent");
        $eventSelect.on("change", function (e) {

            console.log($("#selStudent").select2('data').text); //Prints the name when it is selected
            dummy($("#selStudent").select2("data").text); //should set the name value but it refreshes the page.
            return false;
        });

    });

    </script>


</head>

<body>
    <apex:form >

        <apex:actionFunction name="dummy" action="{!dummy}" reRender="">
            <apex:param name="param1" assignTo="{!selectedName}" value=""/>
        </apex:actionFunction>

        <apex:actionFunction name="save" action="{!click}">              
        </apex:actionFunction>
        <input type="hidden" id="selStudent" style="width:300px" value="{!selectedName}"/>
        <apex:commandButton value="Save" id="do" 
                            onclick="return save(document.getElementById('{!$Component.selStudent}').select2('data').text);" 
                            styleClass="btn btn-lg btn-success btn-block"/>
    </apex:form>
</body>

Controller: 控制器：

public class playGround2Controller {

    public String selectedName {get;set;}

    public void playGround2(){
        selectedName = 'N/A';
    }

    public PageReference pageLoad(){
        selectedName = '';
        return null;
    }
    public void dummy(){
        system.debug('dummy');
        system.debug(selectedName);       
    }
    public void click(){
        system.debug('click');
        system.debug(selectedName);
    }
}

Answer 1

The apex:actionfunction needed to be placed before the script to allow the script to call it. 需要将apex：action函数放置在脚本之前，以允许脚本调用它。

Visual Force Page 视觉力页面

<apex:page controller="playGround2Controller"  standardStylesheets="false" docType="html-5.0" showHeader="false">

<head>
    <apex:form>
        <apex:actionFunction name="dummy" action="{!dummy}" reRender="">
            <apex:param name="param1" assignTo="{!selectedName}" value=""/>
        </apex:actionFunction>
    </apex:form>
    <!-- stylesheets -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css"/>
    <style type="text/css">
        body {
        padding: 40px;
        }
    </style>

    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js"></script>
    <script>
    $(document).ready(function() { 
        //  var $eventSelect = $("selStudent");
        var nameArray = [{id:1,text:'Bob'}, {id:2,text:'Joe'}, {id:3,text:'Alex'} ];

        $("#selStudent").select2({ 
            data: nameArray, 
            placeholder: "Student",
        }); 
        var $eventSelect = $("#selStudent");
        $eventSelect.on("change", function (e) {

            console.log($("#selStudent").select2('data').text); //Prints the name when it is selected
            dummy($("#selStudent").select2("data").text); //should set the name value but it refreshes the page.
            return false;
        });

    });

    </script>


</head>

<body>
    <apex:form >



        <apex:actionFunction action="{!click}" name="save">              
        </apex:actionFunction>
        <input type="hidden" id="selStudent" style="width:300px" value="{!selectedName}"/>
        <apex:commandButton value="Save" id="do" 
                            onclick="return save(document.getElementById('{!$Component.selStudent}').select2('data').text);" 
                            styleClass="btn btn-lg btn-success btn-block"/>
    </apex:form>
</body>

将Select2下拉框的选定值传递给控制器

问题描述

Problem: 问题：

Visual Force Page: 视觉力页面：

Controller: 控制器：

1 个解决方案

解决方案1
0 2017-05-23 22:44:28

将Select2下拉框的选定值传递给控制器

问题描述

Problem: 问题：

Visual Force Page: 视觉力页面：

Controller: 控制器：

1 个解决方案

解决方案1 0 2017-05-23 22:44:28

解决方案1
0 2017-05-23 22:44:28