顯示和值取決於具有不同值的下拉菜單的選項

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的價值