Question

我使用下面的代码填充多选：

    <s:select id = "deviceTypes" 
            name = "serviceVO.deviceTypes"
        multiple = "multiple" 
        required = "true"
  onBeforeTopics = "openLoader" 
onCompleteTopics = "closeLoader"
             key = "service.authoring.label.deviceTypes"
         tooltip = "%{getText('service .authoring.label.deviceTypes.info')}"
            list = "deviceTypesList" 
         listKey = "value" 
       listValue = "name"
        cssClass = "search-val form-control" />

在document.ready上我正在打电话：

 $("#deviceTypes").attr("multiple","true");
 $("#deviceTypes").select2();

有了这个，它默认显示在页面加载时选择的第一个选项值，我不想要。我希望用户应该选择值，一旦用户提交表单，然后在修改页面上选择的值应该显示在选择框中，用户可以添加或删除值。

Answer 1

key属性是使用相同值设置三个属性的简写：name，value，label。

如您所知，value（如果存在）预设元素的值，而name用于将参数发送回动作，并预设值value失踪了。

然后将key与上述某个属性结合使用会产生误导和错误。
删除key，改为使用label：

    <s:select id = "deviceTypes" 
            name = "serviceVO.deviceTypes"
        multiple = "multiple" 
        required = "true"
  onBeforeTopics = "openLoader" 
onCompleteTopics = "closeLoader"
           label = "service.authoring.label.deviceTypes"
         tooltip = "%{getText('service .authoring.label.deviceTypes.info')}"
            list = "deviceTypesList" 
         listKey = "value" 
       listValue = "name"
        cssClass = "search-val form-control" />

请注意，serviceVO.deviceTypes必须是带有getter的action属性，其类型为List（或其他），第一次为null，并包含下次读取的选定值。

Answer 2

仍然没有得到你想要的东西。

但我认为你可以用一些java脚本代码来做到这一点。创建一个s:select或sj:select，其中包含包含所有数据的选项，但style="display: none"会使其不可见。使用空选项将第二个选择框设为正常html select，这是用户看到的。因此，您的主选择框将在页面加载时第一次加载，但用户无法看到它。

您可以使用户可以看到某些操作，例如单击复选框。

但是，提交表单不会将所有选择选项传递给服务器，只会将选定的选项发送到服务器。

Answer 3

我能够在页面加载时使用以下代码：

$("#deviceTypes").attr("multiple","true");
$("#deviceTypes").select2();
var selectedDevice=[];
var deviceList = '<s:property value="serviceVO.packagedService.deviceType" />';
$.each(deviceList, function(index,value) {
    selectedDevice.push(value); 
    });
 $("#deviceTypes").select2("val", selectedDevice);

jquery-select2显示默认选择的第一个值

3 个答案: