2015-11-03 174 views
3

我已经搜索了很多答案并尝试了它们,但我无法使用jquery动态地更改select2下拉列表的值。select2使用jquery动态更改值

我正在使用ajax select2使用json远程获取数据。

下拉菜单工作正常。

这是我到目前为止尝试过的。

//UserGroupID is a variable contains the database value 
var groupSelector = $("#EditSpeciality"); 
//1. 
groupSelector.select2("val", {ID: userGroupID, TEXT: "Lorem Ipsum"}); 
//2. 
groupSelector.val(userGroupID).trigger("change"); 
//3. 
groupSelector.select2("val", {ID: userGroupID, TEXT: "Lorem Ipsum"}); 
//4. 
groupSelector.val(userGroupID); 

但是他们都没有改变下拉值。

如何动态设置数值..

这是我的HTML。

<select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;"></select> 

= - = - = - = - = - = - = - = - = - = - =

更新:

进出口使用笨MVC,我知道这不应该物。但是想把所有东西放在桌子上。

的选择2的版本是,我得到4.0.0

JSON代码是从控制器,通过它选择2被填充列表。

以下是select2的代码。

function commonSelect2(selector,url,minInputLength,placeholder){ 
    selector.select2({ 
     minimumInputLength:minInputLength, 
     placeholder:placeholder, 
     ajax: { 
      url: url, 
      dataType: "json", 
      delay: 250, 
      data: function (params) { 
       return { 
        q: params.term, // search term 
        page: params.page 
       }; 
      }, 
      processResults: function (data) { 
       return { 
        results: $.map(data, function(obj) { 
         return { id: obj.ID, text: obj.TEXT }; 
        }) 
       }; 
      }, 
      cache: true 
     }, 
     debug:false 
    }); 
} 

我调用上面的函数来初始化页面中的下拉菜单。

// Speciality Selector for editing popup box 
var SelectorSpeciality = $("#EditSpeciality"); 
var minInputLength = 0; 
var placeholder = "Select Speciality"; 
var ConsultantSelectorURL = "' . base_url() . 'Admin/select_speciality"; 
commonSelect2(SelectorSpeciality,ConsultantSelectorURL,minInputLength,placeholder); 

功能驻留在资产规模/ JS目录中的一些.js文件。

它帮助我获得干净的代码并随时调用函数。

我认为我们可以与initselection修复它,但我不知道如何与initselection我也没有试着用搜索引擎,但没有运气修复它..

回答

4

为选项被添加到列表中,第二个选项将工作(对于select2 4。0)

$("#groupSelector").append ('<option value="' + userGroupID+ '">' + userGroupID+ '</option>') 

groupSelector.val(userGroupID).trigger("change"); 

如果你需要的选项,选择此有追加时进行,

$("#groupSelector").append ('<option selected="selected" value="' + userGroupID+ '">' + userGroupID+ '</option>') 

并且不需要

2

第二种方法你试过的作品,你只是设置选择的值,然后触发change事件,因此选择2就可以拿起:只要

jQuery(function($) { 
 
    $('select').select2(); 
 

 
    $('select').val(2).trigger('change'); 
 
    $('body').append('<p>Value is: ' + $('select').val() + '</p>'); 
 

 
    $('select').val(3).trigger('change'); 
 
    $('body').append('<p>Value is: ' + $('select').val() + '</p>'); 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> 
 

 
<select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select>

+0

先生,我的代码有来自控制器的json数据。我正在使用select2 4.0.0。 和以上方法都不适合我:( –

1

触发改变你可以试试这个样子作品在我的情况下,

groupSelector.select2("val", {"id": userGroupID, text: "Lorem Ipsum"}, true); 
0

在这三条线寻找

var SelectorSpeciality = $("#EditSpeciality");

groupSelector.val(userGroupID).trigger("change");

<select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;"></select>` 

哪里#EditSpeciality从何而来?据我所知,该ID是针对您要更改的特定选择上的#groupSelector。不知道其他ID来自哪里。交换

var SelectorSpeciality = $("#EditSpeciality");

var SelectorSpeciality = $("#groupSelector");

然后看看是否有任何其他方法在你的岗位工作提到。