如何根据我从 ajax 获得的 json 在 select 上添加禁用的 select 属性
How to add disabled select property on select based on the json I got from the ajax
我有一个物化 select 框,如
<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 调用的数据,其中有会话名称。我想将 disabled selected 属性添加到该选项,如果该值存在于我拥有的 JSON
中
$('#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) {
}
});
});
Select 具有相同值的选项,如果存在这样的选项,则设置其选择和禁用属性:
$.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) {
}
});
您可以简单地检查下拉列表是否包含值添加 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) {
}
});
我有一个物化 select 框,如
<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 调用的数据,其中有会话名称。我想将 disabled selected 属性添加到该选项,如果该值存在于我拥有的 JSON
中
$('#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) {
}
});
});
Select 具有相同值的选项,如果存在这样的选项,则设置其选择和禁用属性:
$.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) {
}
});
您可以简单地检查下拉列表是否包含值添加 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) {
}
});