如何根据我从 ajax 获得的 json 在 select 上添加禁用的选择属性答案

【问题标题】：How to add disabled select property on select based on the json I got from the ajax如何根据我从 ajax 获得的 json 在 select 上添加禁用的选择属性
【发布时间】：2016-12-21 09:46:55
【问题描述】：

我有一个像

这样的物化选择框

<select id="create-event-session-name" name="session_name" class="validate">
    <option value="" disabled selected>Select Session</option>
    <option value="measurements">Measurements</option>
    <option value="bath">Bath</option>
    <option value="post_partum">Post Partum</option>
    <option value="nicu">NICU</option>
    <option value="mics">Mics.</option>
</select>

我有一个来自 ajax 调用的数据，其中有会话名称。如果我拥有的JSON 中存在该值，我想将 disabled selected 属性添加到选项中

$('#create-event-user').on('change', function() {
  var userId = $('#create-event-user').val();
  var sessionStr = '<option value=""    disabled selected>Select User</option>';
  $.ajax({
    type: 'GET',
    url: "/get-user-sessions/" + userId,
    success: function(data) {
      $.each(data, function(index, item) {
        console.info(item.session_name);
        var mapped = $("select#create-event-session-name option").map(function() {
          return $(this).val();
        }).get();
        console.info(mapped);
        //console.info($('#create-event-session-name option[value = "''"]'));
      });
    },
    error: function(jqXHR, textStatus, errorThrown) {

    }
  });
});

【问题讨论】：

只有一个值是相同的？
nops，可以有很多，比如 form ajax 我可以得到测量值、bath、post_partum.... 我想禁用所有这三个选项
在 'console.log(mapped)` 之后尝试这个。 $("#create-event-user option[value='"+item.session_name+"']").attr("disabled",true);

标签： javascript jquery json ajax selectize.js

【解决方案1】：

选择具有相同值的选项，如果存在这样的选项，则设置其 slelected 和 disabled 属性：

 $.ajax({
    type: 'GET',
    url: "/get-user-sessions/" + userId,
    success: function(data) {
      $.each(data, function(index, item) {
        var opt = $('#create-event-session-name option[value="'+item.session_name+'"]');
        if(opt.length) {opt.attr('selected',true).attr('disabled',true);}
      });
    },
    error: function(jqXHR, textStatus, errorThrown) {

    }
  });

【讨论】：

【解决方案2】：

您可以简单地检查下拉菜单是否包含值添加disabled 属性

$("#create-event-user option[value='"+item.session_name+"']").attr({"disabled":true,"selected":"selected"});

完整代码

$.ajax({
    type: 'GET',
    url: "/get-user-sessions/" + userId,
    success: function(data) {
      $.each(data, function(index, item) {
        console.info(item.session_name);
        var mapped = $("select#create-event-session-name option").map(function() {
          return $(this).val();
        }).get();
        console.info(mapped);
        $("#create-event-user option[value='"+item.session_name+"']").attr({"disabled":true,"selected":"selected"});
      });
    },
    error: function(jqXHR, textStatus, errorThrown) {

    }
  });

【讨论】：