jquery select2 - not working

后端未结

关注

 6  803

I am using select2 plugin(ivaynberg.github.io/select2). I am trying to display a dropdown(select). It is getting all the items in data.php as options. However select2 is mea

相关标签:

6条回答

有刺的猬

2020-12-15 05:56
After much reading, I decided to change the select2.js itself.

At line 2109 change it to
```
this.focusser.attr("id", "s2id_"+this.select.context.id);
```
If your input tag is as so
```
<select id="fichier">
```
Hence your input tag that is searching through the list will have an id of s2id_fichier_search

As far as I know, there shouldn't be a conflict and THIS will allow you to have multiple select2 on the same page and run your functions (including .get, .post) through their events eg.
```
$(function() { 
  $('#s2id_fichier_search').keyup(function() {
    console.log('Be Practical')
  })
}
```
So this will run like if you were to use
```
<select id="fichier" onkeyup="console.log('Be Practical')">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

有刺的猬

2020-12-15 05:57

I try the code, it works well. I think you not include jquery framework or check the path of js and css.

<!DOCTYPE html>
<html>
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="select2.min.js"></script>
    <script>
        $(document).ready(function() { 
            $('#thisid').select2({
                minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });

        });
    </script>
</head>
<body>
    <input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

</body>
</html>

0 讨论(0)

别跟我提以往

2020-12-15 05:59

I think no need to go with hidden input element. You can give a try, get plain html data from ajax call and set it in and then init select2 resetting method. Here's code snippet

HTML

<select id="select" name="select" class="select2">
        <option value="" selected disabled>Please Select Above Field</option>
</select>

Javascript

    $.ajax({
        type: "POST",
        cache:false,
        url: YOUR_AJAX_URL,
        success: function(response)
        {
            $('#select').html(response);
        }
    });
    $('#select').select2("val","");

Ajax Response :

<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>

0 讨论(0)

滥情空心

2020-12-15 06:03

select2 will not do AJAX if attached to a standard select form control. It MUST be attached to a hidden input control to load via AJAX.

Update: This has been fixed in Select2 4.0. From Pre-Release notes:

Consistency with standard <select> elements for all data adapters, removing the need for hidden <input> elements.

It can also be seen in function in their examples section.

0 讨论(0)
发布评论:

提交评论
- 加载中...
说谎

2020-12-15 06:12

In my case, an older version of select2 library was causing the issue, make sure that you include the latest version of js and css in the web page.

0 讨论(0)
发布评论:

提交评论
- 加载中...

长情又很酷

2020-12-15 06:14

I guess user2315153 wants to receive multiple remote values, and incorrectly assigning select2() with ajax call to a <select> element.

The correct way to get remote values, is using a normal <input> element, and if is desired multiple values, inform the "multiple" parameter on method call. Example:

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
        minimumInputLength: 2,
        multiple: true,
        ajax: {
              ...

The <select> element CAN NOT be used to remote values

UPDATE: As of select2 4.0.0, hidden inputs has deprecated:

https://select2.github.io/announcements-4.0.html#hidden-input

This means: Instead of using an input to attrib select2 plugin, use an SELECT tag.

Pay attention: it's easy to use any format of json from your server. Just use "processResults" to do it.

Example:

<select id='thisid' class='select2-input select2'></select>
<script>
        $("#thisid").select2({
            multiple: true,
            closeOnSelect: true,

            ajax: { 
                url: "myurl",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                      q: params.term,
                      page: params.page
                    };
                  },
                processResults: function (data, page) { //json parse
                    console.log("processing results");
                    //Transform your json here, maybe using $.map jquery method
                    return { 
                       results: yourTransformedJson
                    };
                },
                cache: (maybe)true
            }
        });
</script>

0 讨论(0)