Select2基本示例不起作用

Question

Select2基本示例不起作用

Abd*_*el5 3 javascript forms symfony jquery-select2

我正在尝试让select2图书馆使用symfony2脚本。

我正在尝试实现提供https://select2.github.io/examples.html页面的基本示例。

因此，我在页面标题中添加了：

<!-- SELECT 2-->
                            <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
                            <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
                            <!-- /SELECT2 -->

Run Code Online (Sandbox Code Playgroud)

并按照示例中提供的代码进行操作：

<script type="text/javascript">
     $(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>

<select id="appbundle_items_accountdebet" name="appbundle_items[accountdebet]" class="js-example-basic-single"><option value="1">001 - ?rodki trwa?e x</option><option value="2">001-001 - ?rodek trwa?y 1 </option><option value="3">001-002 - ?rodek trwa?y 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select>

Run Code Online (Sandbox Code Playgroud)

不幸的是，由于没有视觉变化，我似乎做错了什么。

整页代码：

<!-- app/Resources/views/base.html.php -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Accounting Book's Online</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->

        <link href="http://localhost/symfony_learn/web/bundles/bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>


    <link href="http://localhost/symfony_learn/web/bundles/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://localhost/symfony_learn/web/bundles/bootstrap/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://localhost/symfony_learn/web/bundles/bootstrap/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://localhost/symfony_learn/web/bundles/bootstrap/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="http://localhost/symfony_learn/web/bundles/bootstrap/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="http://localhost/symfony_learn/web/bundles/bootstrap/ico/favicon.png">

                            <!-- SELECT 2-->
                            <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
                            <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
                            <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
                            <!-- /SELECT2 -->
  </head>

  <body>


<!-- Kod tymczasowy -->
<!-- /Kod tymczasowy -->

    <div class="navbar navbar-inverse navbar-top"> <!-- navbar-fixed-top -->
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Accounting Book's Online</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
                        <p>Username: Abdel</p>
                        </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="/symfony_learn/web/app_dev.php/app/static/help">Help</a></li>
              <li><a href="/symfony_learn/web/app_dev.php/app/static/software">Software</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Actions</li>
              <li ><a href="/symfony_learn/web/app_dev.php/app/accounts/">Accounts</a></li>
              <li ><a href="/symfony_learn/web/app_dev.php/app/listbooks/">Books</a></li>
              <li ><a href="/symfony_learn/web/app_dev.php/app/documents/">Documents</a></li>
              <li class="nav-header">Reports</li>
              <li ><a href="/symfony_learn/web/app_dev.php/app/accounts/reportsums">Accounts values</a>
            </ul>
          </div><!--/.well -->
                   <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Name of entity</li>
              Test <A HREF="/symfony_learn/web/app_dev.php/app/listbooks/">[Change]</A>
              </ul>
              </div> <!--/.well -->


        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <p>      <B>Item</B><BR>


<form name="appbundle_items" method="post" action="">
 <SCRIPT type="text/javascript">
     $(document).ready(function() {
$("js-example-basic-single").select2();
});
</SCRIPT>

<div id="appbundle_items"><div>                <label for="appbundle_items_marker" class="required">Marker</label><input type="text" id="appbundle_items_marker" name="appbundle_items[marker]" required="required" maxlength="220" /></div><div>                <label class="required">Itemdate</label><div id="appbundle_items_itemdate" maxlength="220"><select id="appbundle_items_itemdate_month" name="appbundle_items[itemdate][month]"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select><select id="appbundle_items_itemdate_day" name="appbundle_items[itemdate][day]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select><select id="appbundle_items_itemdate_year" name="appbundle_items[itemdate][year]"><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option></select></div></div><div>                <label for="appbundle_items_itemvalue" class="required">Itemvalue</label><input type="text" id="appbundle_items_itemvalue" name="appbundle_items[itemvalue]" required="required" /></div><div>                <label for="appbundle_items_accountdebet" class="required">Accountdebet</label><select id="appbundle_items_accountdebet" name="appbundle_items[accountdebet]" class="js-example-basic-single"><option value="1">001 - ?rodki trwa?e x</option><option value="2">001-001 - ?rodek trwa?y 1 </option><option value="3">001-002 - ?rodek trwa?y 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select></div><div>                <label for="appbundle_items_accountcredit" class="required">Accountcredit</label><select id="appbundle_items_accountcredit" name="appbundle_items[accountcredit]" class="js-example-basic-single"><option value="1">001 - ?rodki trwa?e x</option><option value="2">001-001 - ?rodek trwa?y 1 </option><option value="3">001-002 - ?rodek trwa?y 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select></div><div><button type="submit" id="appbundle_items_save" name="appbundle_items[save]">Add item</button></div><input type="hidden" id="appbundle_items__token" name="appbundle_items[_token]" value="uc4gtvak7M-3gc4HsIuVlr0EpcycuctUGPJu_kAI7c8" /></div>
</form>

  </p>
          </div>

        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Investment Opportunities Sp. z o.o. 2015</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/jquery.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-transition.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-alert.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-modal.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-dropdown.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-scrollspy.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-tab.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-tooltip.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-popover.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-button.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-collapse.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-carousel.js"></script>
    <script src="http://localhost/symfony_learn/web/bundles/bootstrap/js/bootstrap-typeahead.js"></script>


<div id="sfwdt3909dd" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/    Sfjs = (function() {        "use strict";        var noop = function() {},            collectionToArray = function (collection) {                var length = collection.length || 0,                    results = new Array(length);                while (length--) {                    results[length] = collection[length];                }                return results;            },            profilerStorageKey = 'sf2/profiler/',            request = function(url, onSuccess, onError, payload, options) {                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');                options = options || {};                options.maxTries = options.maxTries || 0;                xhr.open(options.method || 'GET', url, true);                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');                xhr.onreadystatechange = function(state) {                    if (4 !== xhr.readyState) {                        return null;                    }                    if (xhr.status == 404 && options.maxTries > 1) {                        setTimeout(function(){                            options.maxTries--;                            request(url, onSuccess, onError, payload, options);                        }, 500);                        return null;                    }                    if (200 === xhr.status) {                        (onSuccess || noop)(xhr);                    } else {                        (onError || noop)(xhr);                    }                };                xhr.send(payload || '');            },            hasClass = function(el, klass) {                return el.className && el.className.match(new RegExp('\\b' + klass + '\\b'));            },            removeClass = function(el, klass) {                if (el.className) {                    el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');                }            },            addClass = function(el, klass) {                if (!hasClass(el, klass)) {                    el.className += " " + klass;                }            },            getPreference = function(name) {                if (!window.localStorage) {                    return null;                }                return localStorage.getItem(profilerStorageKey + name);            },            setPreference = function(name, value) {                if (!window.localStorage) {                    return null;                }                localStorage.setItem(profilerStorageKey + name, value);            },            requestStack = [],            renderAjaxRequests = function() {                var requestCounter = document.querySelectorAll('.sf-toolbar-ajax-requests');                if (!requestCounter.length) {                    return;                }                var tbodies = document.querySelectorAll('.sf-toolbar-ajax-request-list');                var state = 'ok';                if (tbodies.length) {                    var tbody = tbodies[0];                    var rows = document.createDocumentFragment();                    if (requestStack.length) {                        for (var i = 0; i < requestStack.length; i++) {                            var request = requestStack[i];                            var row = document.createElement('tr');                            rows.appendChild(row);                            var methodCell = document.createElement('td');                            methodCell.textContent = request.method;                            row.appendChild(methodCell);                            var pathCell = document.createElement('td');                            pathCell.className = 'sf-ajax-request-url';                            pathCell.textContent = request.url;                            pathCell.setAttribute('title', request.url);                            row.appendChild(pathCell);                            var durationCell = document.createElement('td');                            durationCell.className = 'sf-ajax-request-duration';                            if (request.duration) {                                durationCell.textContent = request.duration + "ms";                            } else {                                durationCell.textContent = '-';                            }                            row.appendChild(durationCell);                            row.appendChild(document.createTextNode(' '));                            var profilerCell = document.createElement('td');                            if (request.profilerUrl) {                                var profilerLink = document.createElement('a');                                profilerLink.setAttribute('href', request.profilerUrl);                                profilerLink.textContent = request.profile;                                profilerCell.appendChild(profilerLink);                            } else {                                profilerCell.textContent = 'n/a';                            }                            row.appendChild(profilerCell);                            var requestState = 'ok';                            if (request.error) {                                requestState = 'error';                                if (state != "loading" && i > requestStack.length - 4) {                                    state = 'error';                                }                            } else if (request.loading) {                                requestState = 'loading';                                state = 'loading';                            }                            row.className = 'sf-ajax-request sf-ajax-request-' + requestState;                        }                        var infoSpan = document.querySelectorAll(".sf-toolbar-ajax-info")[0];                        var children = collectionToArray(tbody.children);                        for (var i = 0; i < children.length; i++) {                            tbody.removeChild(children[i]);                        }                        tbody.appendChild(rows);                        if (infoSpan) {                            var text = requestStack.length + ' call' + (requestStack.length > 1 ? 's' : '');                            infoSpa

Answer 1

LPo*_*ski 6

在完整的代码示例中，通过添加“。”来修复类选择器。在班级名称前，更改：

 <SCRIPT type="text/javascript">
     $(document).ready(function() {
$("js-example-basic-single").select2();
});
</SCRIPT>

Run Code Online (Sandbox Code Playgroud)

至：

<script type="text/javascript">
     $(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>

Run Code Online (Sandbox Code Playgroud)

在dom准备好代码之前，您是否在页面上包含了jquery？
向我们提供JS控制台日志
与js调试器一起检查解析器是否达到：

$（“。js-example-basic-single”）。select2（）;

您的代码至少在这里似乎可以正常工作：http : //jsfiddle.net/8349tck1/

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select id="appbundle_items_accountdebet" name="appbundle_items[accountdebet]" class="js-example-basic-single"><option value="1">001 - ?rodki trwa?e x</option><option value="2">001-001 - ?rodek trwa?y 1 </option><option value="3">001-002 - ?rodek trwa?y 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select>

<script>
    $(document).ready(function() {
    $(".js-example-basic-single").select2();
});
</script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	17780 次
最近记录：	10 年，5 月前