I'm trying to disable an option from a selection through its value. When the value is equal to 'sure' the option is available. When the option is 'wrong' let it be disabled for options.
$(document).ready(function() {
$.getJSON("https://sheets.googleapis.com/v4/spreadsheets/1_TBtn730WbjJF_qRjo3c6SQXj_EeGU_qKOZbPTkVxfg/values/Page!A2:B5?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI", function(result) {
$.each(result.values, function(i, field) {
$("#SelectTestID").append('<option hidden="hidden" selected="selected" value="">Options</option><option value="' field[1] '">' field[0] '</option>');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<select id="SelectTestID"></select>
CodePudding user response:
If I've understood what you're asking you can check the value of field[1]
and set the disabled
property of the option
element accordingly.
Also note that in the example below I remove the hidden option
element as it served no purpose, and I also used a template literal for building the string as it's easier to read and less verbose.
$(document).ready(function() {
$.getJSON("https://sheets.googleapis.com/v4/spreadsheets/1_TBtn730WbjJF_qRjo3c6SQXj_EeGU_qKOZbPTkVxfg/values/Page!A2:B5?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI", function(result) {
$.each(result.values, function(i, field) {
$("#SelectTestID").append(`<option value="${field[1]}" ${(field[1] === 'wrong' ? 'disabled' : '')}>${field[0]}</option>`);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<select id="SelectTestID"></select>
CodePudding user response:
In the current example you can do so by checking if field[1] is equal to "wrong", if it is then you add the disabled="true" attribute to the option.
Here's an example of what that might look like:
$(document).ready(function () {
$.getJSON(
"https://sheets.googleapis.com/v4/spreadsheets/1_TBtn730WbjJF_qRjo3c6SQXj_EeGU_qKOZbPTkVxfg/values/Page!A2:B5?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI",
function (result) {
$.each(result.values, function (i, field) {
let optionString = `<option hidden="hidden" selected="selected" value="">Options</option><option value="${field[1]}">${field[0]}</option>`;
if (field[1] === "wrong") {
optionString = `<option hidden="hidden" selected="selected" value="">Options</option><option value="${field[1]}" disabled="true">${field[0]}</option>`;
}
$("#SelectTestID").append(optionString);
});
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectTestID">
</select>
There are other approaches you could use, but since you're already using a string to append your Select element I used a string as well.