title: JQUERY replace text on data-empty_label value
body: <p>I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.</p>
  
  <pre><code>&lt;div class="form-row"&gt;
  
      &lt;input type="hidden" name="csrfmiddlewaretoken" value="xxxxx"&gt;
      &lt;div class="form-group custom-control col-md-3"&gt;         
          &lt;select name="category" class="custom-select custom-select-lg" required id="id_category"&gt;
              &lt;option value="" selected&gt;---------&lt;/option&gt;
              &lt;option value="1"&gt;One&lt;/option&gt;
              &lt;option value="2"&gt;Two&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group custom-control col-md-3"&gt;
          &lt;select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory"&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group custom-control col-md-3"&gt;
          &lt;select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name"&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-md-3"&gt;
          &lt;input type="submit" value="Submit" class="btn-lg btn-success btn-block"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          $(document).ready(function() {
          $("select").on("change", function() {
              if($("select[name='category']").val() == "") { 
                  $("select[name='category'] &gt; option:first-child").text('Category');
                  $("select[name='subcategory']").prop('disabled', 'disabled');
                  $("select[name='subcategory'] &gt; option:first-child").text('Subcategory');
                  $("select[name='name']").prop('disabled', 'disabled');
                  $("select[name='name'] &gt; option:first-child").text('Recipe');
              } else {
                  $("select[name='subcategory']").removeAttr("disabled");
                  $("select[name='subcategory'] &gt; option:first-child").text('Subcategory');
              }
          }).trigger('change');
              $("select[name='subcategory']").on("change", function() {
                  $("select[name='subcategory'] &gt; option:first-child").text('Subcategory');
                  if($(this).val() == "") { 
                      $("select[name='name']").prop('disabled', 'disabled');
                      $("select[name='recipename'] &gt; option:first-child").text('Recipe');
                  } else {
                      $("select[name='name']").removeAttr("disabled");
                      $("select[name='ename'] &gt; option:first-child").text('Recipe');
                  }
              }).trigger('change');
          });
      &lt;/script&gt;
  </code></pre>