Disable an option from a selection by its value

user_15020558 0
Viewed 39

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 class="SelectTest" id="SelectTestID"></select>

arrays html jquery javascript
2 Answers

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 class="SelectTest" id="SelectTestID"></select>

user_5194130

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.

user_177939950
Related