单击某些按钮后select2中的动态选项

Posted 2023-05-07

【中文标题】单击某些按钮后select2中的动态选项

【英文标题】：dynamic options in select2 after click in some button

【发布时间】：2017-02-08 10:12:12

【问题描述】：

我在我的网站中使用Select2，在进行一些用户交互后，我需要用新选项重新加载（更改）选择中的选项。

我有这个：

当我选择一天时，我需要重新加载小时数。因为每天都有不同的可用时间，像这样：

这是我的 javascript 对象，包含我需要的所有信息（不需要 AJAX）：

var ob = [
  
    // Don't worry about activityId
    activityId: '1234',
    days: [
      
        //Some date format
        id: '20161001',
        //Available hours for each day
        hours: ["10:00", "11:00"]
      ,
      
        id: '20161002',
        hours: ["10:00", "12:00"]
      
    ]
  ,
  
    activityId: '4567',
    days: [
      
        id: '20161003',
        hours: ["10:30", "19:00"]
      ,
      
        id: '20161002',
        hours: ["10:00", "14:00"]
      
    ]
  
]

我一直在尝试使用$('#selectId').select2( data: data )，但它只会将data 添加到当前可用的data 中，并且只能使用一次。第二次不再添加。

我想删除选项并设置新选项。我正在使用 select2 文档中的这个变量：

var data = [
   id: 0, text: 'enhancement' , 
   id: 1, text: 'bug' , 
   id: 2, text: 'duplicate' , 
   id: 3, text: 'invalid' , 
   id: 4, text: 'wontfix' 
];

总结：当DAYS选择改变时，我想改变HOURS选择的数据。

有什么帮助吗？ 谢谢！

【参考方案1】：

我在几年前找到了this question，一个答案建议在添加新数据选项之前在元素上调用.html('')...

试试这个：

var ob = 
    // Don't worry about activityId
    activityId: '1234',
    days: [
      
        //Some date format
        id: '20161001',
        //Available hours for each day
        hours: ["10:00", "11:00"]
      ,
      
        id: '20161002',
        hours: ["10:00", "12:00"]
      
    ]
  ;
var days = ob.days.map(function(day) 
	return id: day.id, text: day.id;
);

$("#e1").select2(data: days);
$("#e1").change(function(arguments) 
	var value = $("#e1").val();
  var day = ob.days.find(function(day) 
  	return day.id == value;
  );
  var selectList2 = $("#e2");
  selectList2.html('');//this will clear the existing values
  selectList2.select2(data: day.hours);
  selectList2.show(); //in case it wasn't visible before
);

.select2 
  width:100%;
  min-width: 100px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="e1"></select>
<select id="e2" style="display: none"></select>

【讨论】：

谢谢，这就是我今天找到的。我正在删除所有选择的 然后我用$("#item").select2(data: data);

渲染新数据