发表新帖
发表新帖

jQuery multiselect drop down menu

后端 未结
关注
9 1307
眼角桃花
眼角桃花 2020-11-28 07:30

I have a simple html multi select drop down list:
提交评论
  •  加载中...
  • 慢半拍i
    2020-11-28 07:50

    You could hack your own, not relying on jQuery plugins... though you'd need to keep track externally (in JS) of selected items since the transition would remove the selected state info:

    <head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  <script type='text/javascript'>
    $(window).load(function(){
      $('#transactionType').focusin(function(){
        $('#transactionType').attr('multiple', true);
      });
      $('#transactionType').focusout(function(){
        $('#transactionType').attr('multiple', false);
      });
    });>  
  </script>
</head>
<body>
  <select id="transactionType">
    <option value="ALLOC">ALLOC</option>
    <option value="LOAD1">LOAD1</option>
    <option value="LOAD2">LOAD2</option>
  </select>  
</body>
    0 讨论(0)
  • 半阙折子戏
    2020-11-28 07:54

    Update (2017): The following two libraries have now become the most common drop-down libraries used with Javascript. While they are jQuery-native, they have been customized to work with everything from AngularJS 1.x to having custom CSS for Bootstrap. (Chosen JS, the original answer here, seems to have dropped to #3 in popularity.)

    • Select2: https://select2.github.io/
    • Selectize: http://selectize.github.io/selectize.js/

    Obligatory screenshots below.

    Select2:

    Selectize:

    Original answer (2012): I think that the Chosen library might also be useful. Its available in jQuery, Prototype and MooTools versions.

    Attached is a screenshot of how the multi-select functionality looks in Chosen.

    Chosen library

    0 讨论(0)
  • 你的背包
    2020-11-28 07:55

    I've used jQuery MultiSelect for implementing multiselect drop down menu with checkbox. You can see the implementation guide from here - Multi-select Dropdown List with Checkbox

    Implementation is very simple, need only using the following code.

    $('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
    0 讨论(0)
  • 半阙折子戏
    2020-11-28 07:59

    You can use chosen.i download all file from this link Chosen download Link

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="prism.css" rel="stylesheet" type="text/css" />
    <link href="chosen.css" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="prism.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<ion-view view-title="Profile">
<ion-content class="padding">

<div>
    <label class="item item-input">
        <div class="input-label">Enter Your Option</div>
            <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;">
                <option value="Option 2.1">Option 2.1</option>
                <option value="Option 2.2">Option 2.2</option>
                <option value="Option 2.3">Option 2.3</option>
            </select>   
    </label>
</div>
</ion-content>
</ion-view> 
    </div>
    </form>
</body>
</html>

    All file on all same folder

    0 讨论(0)
  • 北海茫月
    2020-11-28 08:03

    • Download jquery.multiselect

    • Include the jquery.multiselect.js and jquery.multiselect.css files

      <script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />

    • Populate your select input

    • Add the multiselect

      $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });

    • You may change the style

      ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }

    • If you want to repopulate the select, you must refresh it:

      $('#' + Field).multiselect('refresh');

    • To get the selected values (comma separated):

      var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();

    • To clear all selected values:

      $('#' + Field).multiselect("uncheckAll");

    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题