为什么当我将 select 选项添加到 select 时，表单字段不会更改为有效？

Question

I have this code and when i add this selected option the form field remains invalid and never change the state. I've tried multiple methods from the form instance and none worked.

  $scope.disDeLoca = true;
  $scope.deLocalidad = "Ciudad Autonoma de Buenos Aires";
  $("select[name='localidadDos'] > option").remove();
        $("select[name='localidadDos']").append(
          '<option selected="true" value="C0001" disabled="true">Ciudad Autónoma de Buenos Aires</option>'
  );
  $scope.disBarrioDe = true;
  $scope.disSrchBtnDe = true;
  $("#deLocalidad").val("Ciudad Autónoma de Buenos Aires");

Answer 1

If you disable that option by using disable="true" then it will remain disabled untill you enable it again.

So, remove this code: disabled=true

 $("select[name='localidadDos'] > option").remove(); $("select[name='localidadDos']").append('<option value="C0002" disabled>I am disabled</option>'); $("select[name='localidadDos']").append('<option value="C0002">Ciudad Autónoma de Aires</option>'); $("select[name='localidadDos']").append('<option selected="true" value="C0001">Ciudad Autónoma de Buenos Aires</option>'); $("select[name='localidadDos']").append('<option value="C0003">Ciudad de Buenos Aires</option>'); $("#deLocalidad").val("Ciudad Autónoma de Buenos Aires"); $('#form').submit(function (e) { e.preventDefault(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <select name="localidadDos" required> <option>This is an example</option> </select> <input type="submit" value="submit"> </form>