我想将我在下拉菜单中选择的值提交到我的数据库,但是添加到数据库的值与我选择的值不一样。
这是插入的记录,“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>
由于其他代码取决于该值,因此您无法更改选项值以匹配您想要的文本。
我们可以做的是将文本保存在一个隐藏的输入中,该输入将与表单一起提交。为此,输入必须与当前选项具有相同的名称,以便您的处理代码能够识别它。
为此我们需要:
- 更改选择的名称,以便我们新的隐藏输入可以使用名称
pilih_kawasan
并求和处理的值,例如<select name="pilih_kawasan_select" id="kawasan">
- 使用名称
pilih_kawasan
向您的表单添加隐藏输入存储文本,例如:<input type="hidden" name="pilih_kawasan" id="pilih_kawasan_value" value="">
- 添加javascript函数来更新隐藏字段的值
#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>
关于javascript - 显示和值取决于具有不同值的下拉菜单的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46231301/