Warum Mehrfachauswahl funktioniert nicht auf Jquery?

Ich möchte mehrere Auswahl in meiner ASP-Seite verwenden. Ich habe PickList von jquery Plugin gefolgt. Ich habe diesen Link gefolgt in unten angegeben:Warum Mehrfachauswahl funktioniert nicht auf Jquery?

http://jquery-plugins.net/picklist-simple-pick-list-with-jquery-and-bootstrap

Das ist mein asp Seite lautet:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testWebForm.aspx.cs" Inherits="_Default" %> 



<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/ui.multiselect.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link href="css/pickList.css" rel="stylesheet"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="js/pickList.js"></script> 
    <title></title> 
    <style> 
     div.container { 
      width: 100%; 
      border: 1px solid gray; 
      height: 100vh; 
     } 

     header, footer { 
      padding: 1em; 
      color: white; 
      background-color: #8dc060; 
      clear: left; 
      text-align: center; 
     } 

     nav { 
      float: left; 
      max-width: 160px; 
      margin: 0; 
      padding: 1em; 
     } 

     nav ul { 
      list-style-type: none; 
      padding: 0; 
     } 

     nav ul a { 
      text-decoration: none; 
     } 

     article { 
      margin-left: 170px; 
      border-left: 1px solid gray; 
      padding: 1em; 
      overflow: hidden; 
     } 

      li { 
       background: #90EE90; 


      } 
      li:nth-child(odd) { 
       background: #00BFFF; 


      } 
      body, html { 
      height: 100%; 
     } 

    </style> 
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script type = "text/javascript"> 



    function ShowCurrentValue() { 

     var name = $("#name").val(); 
     var countryname = $("#countryname").val(); 
     var companyname = $("#companyname").val(); 
     $.ajax({ 
      type: "POST", 
      url: "testWebForm.aspx/GetCurrentTime", 
      data: JSON.stringify({ name: name, countryname: countryname, companyname: companyname }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: OnSuccess, 
      failure: function (response) { 
       alert(response.d); 
      } 

     }); 
    } 
    function OnSuccess(response) { 
     alert(response.d); 
    } 


    $(document).ready(function() { 


     var val = { 
      01: { id: 01, text: 'Isis' }, 
      02: { id: 02, text: 'Sophia' }, 
      03: { id: 03, text: 'Alice' }, 
      04: { id: 04, text: 'Isabella' }, 
      05: { id: 05, text: 'Manuela' }, 
      06: { id: 06, text: 'Laura' }, 
      07: { id: 07, text: 'Luiza' }, 
      08: { id: 08, text: 'Valentina' }, 
      09: { id: 09, text: 'Giovanna' }, 
      10: { id: 10, text: 'Maria Eduarda' }, 
      11: { id: 11, text: 'Helena' }, 
      12: { id: 12, text: 'Beatriz' }, 
      13: { id: 13, text: 'Maria Luiza' }, 
      14: { id: 14, text: 'Lara' }, 
      15: { id: 15, text: 'Julia' } 
     }; 
     var pick = $("#pickList").pickList({ data: val }); 
     $("#getSelected").click(function() { 
      console.log(pick.getValues()); 
     }); 



     $("#registration").click(function (e) { 

      $("#replace").html(''); 

      var htmll = "<div>Name: <input type='text' id='name'></div>"+ 
         "<div>Country: <input type='text' id='countryname'></div>"+ 
         "<div>Company: <input type='text' id='companyname'></div>"+ 
         "<div><input type='button' value='Submit' id='submitbtn' onclick='ShowCurrentValue()'></div>"; 
      $("#replace").append(htmll); 



     }); 





    }); 
</script> 
</head> 
<body style = "font-family:Arial; font-size:10pt"> 


    <div class="container"> 

    <header> 
     <h1>Demo List</h1> 
    </header> 

    <nav> 
     <ul> 
      <li><a id="registration" href="#">Registration</a></li> 
     <li><a id="table" href="#">Table</a></li> 
     <li><a id="details" href="#">Details</a></li> 
     <li><a id="about" href="#">About Us</a></li> 
     </ul> 
    </nav> 

    <div class="panel-heading"> 
       <h3 class="panel-title">PickList Demo</h3> 
      </div> 
      <div class="panel-body"> 

       <div id="pickList"></div> 

       <br><br> 
       <button class="btn btn-primary" id="getSelected">Get Selected</button> 
      </div> 
     </div> 
    <div id="replace"> 
     <img src="images/wallpaper.jpg"/> 
    </div> 

    <footer>Copyright &copy; prangroup.com</footer> 

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

Es zeigt Fehler:

testWebForm.aspx:117 Uncaught TypeError: $(...).pickList is not a function at HTMLDocument. (testWebForm.aspx:117) at Function. (jquery-1.3.2.min.js:19) at Function.each (jquery-1.3.2.min.js:12) at Function.ready (jquery-1.3.2.min.js:19) at HTMLDocument. (jquery-1.3.2.min.js:19) (anonymous) @ testWebForm.aspx:117 (anonymous) @ jquery-1.3.2.min.js:19 each @ jquery-1.3.2.min.js:12 ready @ jquery-1.3.2.min.js:19 (anonymous) @ jquery-1.3.2.min.js:19

Quelle

2017-01-25 OUN Ash

Sie dieses versuchen:

(function($) { 

    $.fn.pickList = function(options) { 

    var opts = $.extend({}, $.fn.pickList.defaults, options); 

    this.fill = function() { 
     var option = ''; 

     $.each(opts.data, function(key, val) { 
     option += '<option id=' + val.id + '>' + val.text + '</option>'; 
     }); 
     this.find('#pickData').append(option); 
    }; 
    this.controll = function() { 
     var pickThis = this; 

     $("#pAdd").on('click', function() { 
     var p = pickThis.find("#pickData option:selected"); 
     p.clone().appendTo("#pickListResult"); 
     p.remove(); 
     }); 

     $("#pAddAll").on('click', function() { 
     var p = pickThis.find("#pickData option"); 
     p.clone().appendTo("#pickListResult"); 
     p.remove(); 
     }); 

     $("#pRemove").on('click', function() { 
     var p = pickThis.find("#pickListResult option:selected"); 
     p.clone().appendTo("#pickData"); 
     p.remove(); 
     }); 

     $("#pRemoveAll").on('click', function() { 
     var p = pickThis.find("#pickListResult option"); 
     p.clone().appendTo("#pickData"); 
     p.remove(); 
     }); 
    }; 
    this.getValues = function() { 
     var objResult = []; 
     this.find("#pickListResult option").each(function() { 
     objResult.push({ 
      id: this.id, 
      text: this.text 
     }); 
     }); 
     return objResult; 
    }; 
    this.init = function() { 
     var pickListHtml = 
     "<div class='row'>" + 
     " <div class='col-sm-5'>" + 
     " <select class='form-control pickListSelect' id='pickData' multiple></select>" + 
     " </div>" + 
     " <div class='col-sm-2 pickListButtons'>" + 
     " <button id='pAdd' class='btn btn-primary btn-sm'>" + opts.add + "</button>" + 
     "  <button id='pAddAll' class='btn btn-primary btn-sm'>" + opts.addAll + "</button>" + 
     " <button id='pRemove' class='btn btn-primary btn-sm'>" + opts.remove + "</button>" + 
     " <button id='pRemoveAll' class='btn btn-primary btn-sm'>" + opts.removeAll + "</button>" + 
     " </div>" + 
     " <div class='col-sm-5'>" + 
     " <select class='form-control pickListSelect' id='pickListResult' multiple></select>" + 
     " </div>" + 
     "</div>"; 

     this.append(pickListHtml); 

     this.fill(); 
     this.controll(); 
    }; 

    this.init(); 
    return this; 
    }; 

    $.fn.pickList.defaults = { 
    add: 'Add', 
    addAll: 'Add All', 
    remove: 'Remove', 
    removeAll: 'Remove All' 
    }; 


}(jQuery)); 


var val = { 
    01: { 
    id: 01, 
    text: 'Isis' 
    }, 
    02: { 
    id: 02, 
    text: 'Sophia' 
    }, 
    03: { 
    id: 03, 
    text: 'Alice' 
    }, 
    04: { 
    id: 04, 
    text: 'Isabella' 
    }, 
    05: { 
    id: 05, 
    text: 'Manuela' 
    }, 
    06: { 
    id: 06, 
    text: 'Laura' 
    }, 
    07: { 
    id: 07, 
    text: 'Luiza' 
    }, 
    08: { 
    id: 08, 
    text: 'Valentina' 
    }, 
    09: { 
    id: 09, 
    text: 'Giovanna' 
    }, 
    10: { 
    id: 10, 
    text: 'Maria Eduarda' 
    }, 
    11: { 
    id: 11, 
    text: 'Helena' 
    }, 
    12: { 
    id: 12, 
    text: 'Beatriz' 
    }, 
    13: { 
    id: 13, 
    text: 'Maria Luiza' 
    }, 
    14: { 
    id: 14, 
    text: 'Lara' 
    }, 
    15: { 
    id: 15, 
    text: 'Julia' 
    } 
}; 

var pick = $("#pickList").pickList({ 
    data: val 
}); 

$("#getSelected").click(function() { 
    console.log(pick.getValues()); 
});

DEMO HERE

Quelle

2017-01-25 06:56:56

Warum Mehrfachauswahl funktioniert nicht auf Jquery?

Antwort

Verwandte Themen