2017-06-06 62 views
1

在多選擇下拉菜單中選擇所有選項應該在最後顯示所有其他選項後顯示...如何顯示最後使用引導多選選擇所有選項?

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>[email protected]</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> 

我試着用下面提到的代碼

+0

你嘗試過什麼? –

+0

我已添加代碼@omisBrown –

回答

0

使用這個腳本的全選功能爲您的多選下拉

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); 
}); 
+0

我正在使用引導多選庫 –

+0

我編輯了我的答案檢查 –