title: Making a option selected in a select element in my joomla component backend form
body: <p>im trying to extend a joomla 3 component's backend form, by adding a datatable which populates data from a table in the database, where the user can add, edit or delete a row. I have the data being displayed and can delete data, but when i come to edit the data im having some issues. </p>
  
  <p>When the user pressed the edit button the data is to be pulled from the database and populated in a form so the user can make changes to it. im getting the data and im populating the form correctly, but i have a select element where i need to make one of the options selected, and i'm having trouble with this, as joomla for some reason alters the select element. below is my code which will make more sense. </p>
  
  <p>// My JQuery code for populating the form</p>
  
  <pre><code>function populateForm(data) {
  
      var dId = jsl('#ajax-discount #d_id');
      var dState = jsl('#ajax-discount #d_state');
      var dCode = jsl('#ajax-discount #d_code');
      var dType = jsl('#ajax-discount #d_type');
      var dValue = jsl('#ajax-discount #d_value');
      var formStatus = jsl('#ajax-discount-msg');
  
      dId.val(data.message.id);
      dState.val(data.message.state);
      dCode.val(data.message.discount_code);
  
      //jsl('select[name="d_type"]').val(data.message.discount_type);
  
      dType.val(data.message.discount_type).trigger( "listz:updated" );
  
      //jsl("#ajax-discount #d_type_chzn &gt; ul.chzn-results &gt; li [value='2']").attr("selected", "selected");
  
      //dType.val(data.message.discount_type);
      //dType.change();
  
      dValue.val(data.message.discount_value);
  
  }
  </code></pre>
  
  <p>// my form which is located in my components tmpl/edit.php file </p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;div class="control-label"&gt;Discount Type&lt;/div&gt;
      &lt;div class="controls"&gt;
          &lt;select id="d_type" name="d_type"&gt;
              &lt;option value="0"&gt;&lt;/option&gt;
              &lt;option value="1"&gt;$ AUD&lt;/option&gt;
              &lt;option value="2"&gt;% Discount&lt;/option&gt;
              &lt;option value="3"&gt;Free Shipping&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>// the select element when its rendered in the browser</p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;div class="control-label"&gt;Discount Type&lt;/div&gt;
      &lt;div class="controls"&gt;
          &lt;select id="d_type" name="d_type" class="chzn-done" style="display: none;"&gt;
              &lt;option value="0"&gt;&lt;/option&gt;
              &lt;option value="1"&gt;$ AUD&lt;/option&gt;
              &lt;option value="2"&gt;% Discount&lt;/option&gt;
              &lt;option value="3"&gt;Free Shipping&lt;/option&gt;
          &lt;/select&gt;&lt;div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="d_type_chzn"&gt;&lt;a class="chzn-single chzn-default" tabindex="-1"&gt;&lt;span&gt;Select an option&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="chzn-drop"&gt;&lt;div class="chzn-search"&gt;&lt;input type="text" autocomplete="off" readonly=""&gt;&lt;/div&gt;&lt;ul class="chzn-results"&gt;&lt;li class="active-result" style="" data-option-array-index="1"&gt;$ AUD&lt;/li&gt;&lt;li class="active-result" style="" data-option-array-index="2"&gt;% Discount&lt;/li&gt;&lt;li class="active-result" style="" data-option-array-index="3"&gt;Free Shipping&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried many different ways, but im stuck at the moment can any please give me some advice or know what i should be doing. </p>