Question

我正在使用jquery select2插件进行多次选择。在这里，我想为每个选择选项添加一个复选框。

应根据选中/未选中attr。

复选框选择下拉选项

HTML：

$("#e1").select2();

JS：

        You can try using this, in CFT one cannot use the refer to the properties of itself using Fn::GetAtt function 
"ECServer": {
          "Type": "AWS::EC2::Instance",
          "Metadata" : {
            "AWS::CloudFormation::Init" : {
              "configSets": {
                "Install": ["ECServerConfig"]
              },
              "ECConfig": {
                "files": {
                  "/tmp/test.txt" : {
                    "mode" : "000644",
                    "owner": "root",
                    "group": "root"
                  }
                },
                "commands" :{
                "test" : {
                  "command" : "curl -s http://169.254.169.254/latest/meta-data/public-hostname > /tmp/test.txt",
        "ignoreErrors" : "false"
        }
              }
            }
          }
        }
        }

Demo

Answer 1

<强> Working fiddle

您可以切换课程而不是使用checkbox，请查看以下示例。

HTML：

<select multiple="multiple" id="e1" style="width:300px">
    <option value="AL" selected> Alabama</option>
    <option value="Am" selected>Amalapuram</option>
    <option value="An" selected>Anakapalli</option>
    <option value="Ak" selected>Akkayapalem</option>
    <option value="WY" selected>Wyoming</option>
</select>

<button type='button' id='submit'>Submit</button>

JS：

$("#e1").select2();

$('body').on('click','.select2-search-choice', function(){
  $(this).toggleClass('selected')
})

$('body').on('click','#submit', function(){
  $('#s2id_e1 .select2-search-choice.selected').each(function(){
    console.log($(this).text());
  })
})

CSS：

.select2-container-multi .select2-choices .select2-search-choice.selected{
    background-color: #286090;
    border-color: #204d74;
    color: #FFF;
    background-image : none;
}

希望这有帮助。

如何将复选框添加到JQuery Select2插件

1 个答案: