title: display and value depending options of drop down menus with different values
body: <p>I want to submit my selected value in the dropdown menu to my database, but the value that is added to the database is not the same as what I chose.</p>
  
  <p>This is the record that was inserted, and the "kuarter" field value is "kuching-01":<br>
  <a href="https://i.stack.imgur.com/me13U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/me13U.png" alt="enter image description here"></a>
  <br>But these are the selections I chose, where the field "kuarter" is "JALAN DURIAN BURONG STAMPIN":</p>
  
  <p><a href="https://i.stack.imgur.com/ZCkJK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZCkJK.png" alt="enter image description here"></a>
  <br>How do I add the value "JALAN DURIAN BURONG STAMPIN" to the database instead of "kuching-01"?</p>
  
  <p>This is my javascript:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
  var $options = $("#kuarter").clone(); // this will save all initial options in the second dropdown
  
  $("#kawasan").change(function() {
  var filters = [];
  if ($(this).val() == "") {
    $(this).find("option").each(function(index, option) {
      if ($(option).val() != "")
        filters.push($(option).val());
    });
  } else {
    filters.push($(this).val())
  }
  $("#kuarter").html("");
  
  $.each(filters, function(index, value) {
    $options.find("option").each(function(optionIndex, option) { // a second loop that check if the option value starts with the filter value
      if ($(option).val().startsWith(value))
        $(option).clone().appendTo($("#kuarter"));
    });
  
  });
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the HTML code for the dropdowns:</p>
  
  <pre><code>&lt;tr valign="baseline"&gt;
    &lt;td nowrap="nowrap" align="right"&gt;Kawasan:&lt;/td&gt;
    &lt;td&gt;&lt;select name="pilih_kawasan" id="kawasan"&gt;
    &lt;option value="none"&gt;SILA PILIH&lt;/option&gt;
  &lt;option value="kuching"&gt;KUCHING&lt;/option&gt;
  &lt;option value="lundu"&gt;LUNDU&lt;/option&gt;
  &lt;option value="sriaman"&gt;SRI AMAN&lt;/option&gt;
  &lt;option value="betong"&gt;BETONG&lt;/option&gt;
  &lt;/select&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr valign="baseline"&gt;
    &lt;td nowrap="nowrap" align="right"&gt;Kuarter:&lt;/td&gt;
    &lt;td&gt;&lt;select name="pilih_kuarter" id="kuarter"&gt;
    &lt;option value="none-01"&gt;&lt;/option&gt;
  &lt;option value="kuching-01"&gt;JALAN DURIAN BURONG STAMPIN&lt;/option&gt;
  &lt;option value="lundu-01"&gt;JALAN SEKETI&lt;/option&gt;
  &lt;option value="sriaman-01"&gt;JALAN FOO CHOW&lt;/option&gt;
  &lt;option value="sriaman-02"&gt;JALAN SABU&lt;/option&gt;
  &lt;option value="betong-01"&gt;JALAN TANJUNG ASSAM&lt;/option&gt;
  &lt;/select&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>