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

Question

我想将下拉菜单中选择的值提交到数据库，但是添加到数据库的值与我选择的值不同。

这是插入的记录，“ 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>

Answer 1

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

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

由于其他代码取决于值，因此您无法更改选项值以匹配所需的文本。

我们可以做的是将文本保存在隐藏的输入中，该输入将与表单一起提交。 为此，输入必须与当前选项具有相同的名称，以便您的处理代码可以识别它。

为此，我们需要：

1. 更改选择的名称，以便我们新的隐藏输入可以使用名称pilih_kawasan并将该值相加以进行处理，例如<select name="pilih_kawasan_select" id="kawasan">
2. 在表单中添加一个名为pilih_kawasan的隐藏输入以存储文本，例如： <input type="hidden" name="pilih_kawasan" id="pilih_kawasan_value" value="">
3. 添加javascript函数以使用所选文本更新隐藏字段#pilih_kawasan_value的值 （即not value ）。
4. 每次#kuarter下拉菜单更改时，请调用此函数。 这需要在2个地方完成：在#kuarter选择新值时，以及'kawasan'的值更改时（因为#kuarter的值#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> 

Answer 2

这是结果。.kuarter的值应为kawasan的值，而kawasan的值应为kuarter的值