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

Question

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

这是插入的记录，而“kuarter”字段的值是“古晋-01”：

但这些都是我选择的选择，该字段“kuarter”是“JALAN DURIAN BURONG STAMPIN：JALAN DURIAN BURONG STAMPIN“

怎样的价值 ”“ 添加到数据库中，而不是 ”古晋-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，而不是文本显示在例如您所选择的选项的值为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的价值 ）。
4. 每当#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>

Answer 2

这是kuarter年代result..the值应在kawasan的价值和kawasan的价值应该在kuarter的价值