我无法从Select2下拉菜单中获取所选值并将其传递给控制器。下拉列表中包含大约一百个名称，因此Select2是查找所需名称的好方法。
我已将页面中的代码修剪为只有一些名称和控制器中的单个值。
更新 我已经添加到JavaScript中，它应该将所选名称的文本值传递给apex：ActionFunction，但它似乎不起作用。
<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>
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);
}
}
答案 0 :(得分：0)
需要在脚本之前放置apex：actionfunction以允许脚本调用它。
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>