javascript - 显示和值取决于具有不同值的下拉菜单的选项

我想将下拉菜单中的选定值提交到数据库，但添加到数据库的值与我选择的值不同。
这是插入的记录，“kuarter”字段值为“kuching-01”：

但这些是我选择的，其中的字段“kuarter”是“jalan durian burong stampin”：

如何将值“jalan durian burong stampin”添加到数据库，而不是“kuching-01”？
这是我的javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

$(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"));
  });

});
});
});
</script>

这是下拉列表的HTML代码：

<tr valign="baseline">
  <td nowrap="nowrap" align="right">Kawasan:</td>
  <td><select name="pilih_kawasan" id="kawasan">
  <option value="none">SILA PILIH</option>
<option value="kuching">KUCHING</option>
<option value="lundu">LUNDU</option>
<option value="sriaman">SRI AMAN</option>
<option value="betong">BETONG</option>
</select></td>
</tr>
<tr valign="baseline">
  <td nowrap="nowrap" align="right">Kuarter:</td>
  <td><select name="pilih_kuarter" id="kuarter">
  <option value="none-01"></option>
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
<option value="lundu-01">JALAN SEKETI</option>
<option value="sriaman-01">JALAN FOO CHOW</option>
<option value="sriaman-02">JALAN SABU</option>
<option value="betong-01">JALAN TANJUNG ASSAM</option>
</select></td>
</tr>

最佳答案

原因是您正在保存value中所选选项的#kuarter，而不是显示在中的文本，例如，您所选选项的值为kuching-01：

<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>

由于其他代码取决于该值，因此不能更改选项值以匹配所需的文本。
相反，我们可以将文本保存在一个隐藏的输入中，该输入将与表单一起提交。要使其工作，输入必须与当前选项的名称相同，以便处理代码能够识别它。
为此，我们需要：
更改select的名称，以便新的隐藏输入可以使用名称pilih_kawasan并将值sumbit用于处理，例如<select name="pilih_kawasan_select" id="kawasan">
在表单中添加名为pilih_kawasan的隐藏输入以存储文本，例如：<input type="hidden" name="pilih_kawasan" id="pilih_kawasan_value" value="">
添加javascript函数，用所选文本（即not value）更新隐藏字段#pilih_kawasan_value的值。
每次“kuarter”下拉列表更改时调用此函数。这需要在两个地方完成：当在#kuarter中选择一个新值时，以及当“kawasan”的值改变时（因为这改变了#kuarter中的值）。
工作段
下面的html&jquery在这里工作，运行代码片段看看它在做什么。

$(document).ready(function() {

  var $options = $("#kuarter").clone();

  $("#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) {
        if ($(option).val().startsWith(value)) {
          $(option).clone().appendTo($("#kuarter"));

          // (4.) ADDED: the #kuarter values have changed, so update the hidden input to the selected text
          selected_text = $("#kuarter option:selected").text(); // get the text from the selected option
          setKuarterValue(selected_text); // call our function to update the hidden input

        }
      });
    });
  });

    // (4.) ADDED: Update the hidden input any time the #kuarter dropdown is changed
  $("#kuarter").change(function() {
    // get the text from the selected option in #kawasan
    selected_text = $("#kuarter option:selected").text();
    setKuarterValue(selected_text); // call our function to update the hidden input
  });

});

/* (3.) function to set the values of the hidden input "#pilih_kuarter"
   that will be submitted to your processing code. */
function setKuarterValue(myval) {
    // if the value hasn't changed , no need to update
    if ($("#pilih_kuarter").val() == myval) return;

    // set the value of the hidden input with the selected text
    $("#pilih_kuarter").val(myval);

     // just for testing, so we can see the value that will be submitted - delete when its working for you
    console.log ("Set pilih_kuarter value = "+ myval);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr valign="baseline">
    <td nowrap="nowrap" align="right">Kawasan:</td>
    <td>

      <!-- (1.) UPDATED: Change the name of the select, as we're going to submit our hidden input using this name instead -->

      <select name="pilih_kawasan" id="kawasan">
                <option value="none">SILA PILIH</option>
                <option value="kuching">KUCHING</option>
                <option value="lundu">LUNDU</option>
                <option value="sriaman">SRI AMAN</option>
                <option value="betong">BETONG</option>
            </select>
    </td>
  </tr>
  <tr valign="baseline">
    <td nowrap="nowrap" align="right">Kuarter:</td>
    <td>
      <select name="pilih_kuarter_select" id="kuarter">
                <option value="none-01"></option>
                <option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
                <option value="lundu-01">JALAN SEKETI</option>
                <option value="sriaman-01">JALAN FOO CHOW</option>
                <option value="sriaman-02">JALAN SABU</option>
                <option value="betong-01">JALAN TANJUNG ASSAM</option>
            </select>
    </td>
  </tr>

 <!-- (2.) ADDED: add a new hidden input to store the required text
      this must have the name=pilih_kuarter so it will submit the value to you database -->
  <input type="hidden" name="pilih_kuarter" id="pilih_kuarter" value="">

</table>