Question

在多选下拉列表中选择显示所有其他选项后，应显示所有选项...

Ex : Select All
     Black
     Red

我想要的是

Ex : Black
     Red
     Select All

我在下面提到的链接 https://github.com/davidstutz/bootstrap-multiselect

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <meta name='viewport' content='width=device-width'>
    <link href="<?php echo base_url();?>assets/css/fonts.css" rel="stylesheet" type="text/css" />


    <script src="<?php echo base_url();?>assets/js/anglr/library/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="<?php echo base_url();?>assets/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="<?php echo base_url();?>assets/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />

    <script src="<?php echo base_url();?>assets/js/anglr/controller/bootstrap_multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#lstFruits').multiselect({
                includeSelectAllOption: true,
                selectedBottom:true
            });
        });
    </script>
    <script type="text/javascript">
     var web_link2="<?php echo base_url();?>";
     $(function () {
        $('#btnSelected2').click(function () {
        var selected = $("#lstFruits option:selected");

        var message = "";
        selected.each(function () {
            message += $(this).val() + "\n";
        });
        var array_split=message.split(',');
        var document_array = document.getElementById('selectedtoken').value;
        window.location.href = web_link2+"campaign/confirm_unsubscribe/"+document_array+'-'+message;    
    });
  });    
</script>
</head>
<body>
    <div class="subscribe-Container">
    <header class="subscribe-Header">
            <a class="link"><img src="<?php echo base_url();?>assets/images/opend-logo.png" class="logo-img" alt="Opend" title="Opend"></a>
    </header>
    <div class="subscribe-Content">
      <h1>admin@opend.com</h1>
      <?php if(!isset($msg)||$msg=='')
        {
          ?>
            <p>Please Confirm your unsubscribe request Opend by Clicking on "Unsubscribe" button below to remove your email address</p>
            <select id="lstFruits" multiple>
    <option value="v"><?php echo $vertical_name?></option>
    <option value="c">Contact List</option>

</select>
<input type="hidden" id="selectedtoken" value="<?php echo $mail_token_var?>"/>
<!--<button class="" id="btnSelected2" value="Unsubscribe"></button>-->
          <a class="unsub_button"  id="btnSelected2" >Unsubscribe</a>
        <?php } else echo $msg; ?>
    </div>

  </div>
  </body>
</html>

我尝试使用下面提到的代码

Answer 1

使用此脚本选择多选下拉菜单的所有功能

HTML

<select id="lstFruits" multiple>
     <option value="v"><?php echo $vertical_name?></option>
     <option value="c">Contact List</option>
     <option id="select_all">Select All<option>
</select>

JS

$('#select_all').click(function() {
    $('#lstFruits option').prop('selected', true);
});

如何显示最后使用bootstrap multiselect选择所有选项？

1 个答案: