【问题标题】:C# razor select2 disableC#剃须刀选择2禁用
【发布时间】:2023-04-05 19:51:01
【问题描述】:

如果 option.AgentName 中有值,我是否可以将此 select2 设置为禁用只读?我已经添加了 selectElement.select2 方法,有什么可以添加到回调的吗?

这是正确的方法吗?使用 self.entry.Agent.AgentName != ""?

查看

<div class="form-group sentence-part-container sentence-part ng-scope ui-draggable sentence-part-entry-agent sentence-part-with-select2-single" [class.has-errors]="entry.IsInvalid && entry.IsTouched">
   <div class="sentence-part-values">
       <div class="sentence-part-values-select2-single">
           <select class="form-control" style="width: 300px" [(ngModel)]="entry.Agent.VersionKey">
               <option *ngFor="let option of agents" [value]="option.VersionKey">{{option.AgentName}}</option>
           </select>
       </div>
   </div>
</div>

ts 文件

$selectElement.select2({
   initSelection: function(element, callback) {
   console.log(self.entry.Agent.AgentName);
   if (self.entry.Agent.AgentName != "")
   {
      console.log('disabled');
      $selectElement.prop('disabled', true);
   }
       callback({ id: self.entry.Agent.VersionKey, text: self.entry.Agent.AgentName });
   },
   placeholder: "Select an agent"
})
.on("change", (e) => {
   self.ngZone.run(() => {
       self.entry.Agent.VersionKey = $selectElement.val();
       self.entry.AgentVersionKey = self.entry.Agent.VersionKey;

       let regimenEntryAgent = this.getRegimenEntryAgentByVersionKey(self.entry.Agent.VersionKey);
       if (regimenEntryAgent) {
           self.entry.Agent.AgentId = regimenEntryAgent.AgentId;
       }

       self.onSentenceChange(null);                    
   });
})
.on("select2:close", () => {
   self.entry.IsTouched = true;
   this.validate();
});    

【问题讨论】:

  • 您想在选择带有 option.AgentName 的选项后禁用它?或者你想在页面加载时禁用它?
  • 如果代理名称中有值则在页面加载中
  • 你会包含实例化select2的脚本吗?还将您放入条目和代理模型类和属性。谢谢。
  • @jerdine-sabio 我已经包含了 select2

标签: asp.net-mvc razor jquery-select2


【解决方案1】:

您可以尝试在Select2newData.push() 方法中应用一些逻辑。

ajax: {
    url: '/DemoController/DemoAction',
    dataType: 'json',
    delay: 250,
    data: function (params) {
        return {
            query: params.term, //search term
            page: params.page
        };
    },
    processResults: function (data, page) {
        var newData = [];
        $.each(data, function (index, item) {

            // apply some logic to the corresponding item here
            if(item.AgentName == "x"){

            }
            newData.push({
                    //id part present in data 
                    id: item.Id,     
                    //string to be displayed
                    text: item.AgentName 
            });
        });
        return { results: newData };
    },
    cache: true
},


更新: 建议您在初始化 Select2 时通过传入一个对象来声明您的配置选项。但是,您也可以使用 HTML5 data-* attributes 定义配置选项。

对于其他 Select2 选项,请查看 Options

【讨论】:

  • 我可以在选项标签中做任何事情吗?
  • @Jefferson 请查看添加到答案中的更新。
  • 有什么我可以在回调中添加的吗?
  • $selectElement.prop('disabled', true); 禁用整个控件,但您需要设置 Select2 的一些选项,我认为您可以在processResults{} 部分执行此操作。如果您不必使用Select2,我可以在剃须刀中基于DropdownList提供更好的解决方案。
  • 是的 Select2 是应用程序中根深蒂固的东西
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-03-31
  • 2018-07-17
  • 1970-01-01
  • 2013-02-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多