我有一個基于給定 select 值的 jquery 代碼過濾器資料庫，問題是當我將它插入資料庫時??，兩個欄位傳遞了相同的資料“城市”行和“brgy”因為它們具有相同的值，它們是條件不基于 select like id 給出的值的解決方案將是條件。我應該修改 jquery 代碼的哪個區域？ （注意：我不擅長 jquery 我也在這個平臺上得到了這個代碼。）
$(document).ready(function() {
$("#city option").hide();
$("#brgy option").hide();
$("#region").change(function() {
var val = $(this).val();
$("#city option").hide();
$("#city").val("");
$("#city option[value='" val "']").show();
$("#city").change();
});
$("#city").change(function() {
var val = $(this).find(":selected").prop("id");
$("#brgy option").hide();
$("#brgy").val("");
$("#brgy option[value='" val "']").show();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="" id="CompostelaValey">CompostelaValey</option>
<option value="" id="DavaoOriental">DavaoOriental</option>
</select>
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option value="" id="Baganga">Baganga</option>
<option value="" id="Maragusan">Maragusan</option>
<option value="" id="MatiCity">MatiCity</option>
</select>
<select type="text" id="brgy">
<option value="">Please Select Your Barangay</option>
<option value="" id="Baganga">Baculin</option>
<option value="" id="Baganga">Batawan</option>
<option value="" id="Baganga">Batiano</option>
<option value="" id="Baganga">Binondo</option>
<option value="" id="Baganga">Bobonao</option>
<option value="" id="Baganga">Campawan</option>
<option value="" id="Baganga">Central</option>
<option value="" id="Baganga">Dapnan</option>
<option value="" id="Baganga">Kinablangan</option>
<option value="" id="Baganga">Lambajon</option>
<option value="" id="Baganga">Lucod</option>
<option value="" id="Baganga">Mahan-ub</option>
<option value="" id="Baganga">Mikit</option>
<option value="" id="MatiCity">Central</option>
<option value="" id="MatiCity">Badas</option>
<option value="" id="MatiCity">Matiao</option>
<option value="" id="Maragusan">kalapagan</option>
</select>這是上面使用 jQuery 的作業 html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select>
</p><br><br>
<p>SELECT YOUR THE CITY
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option value="DavaoOriental" id="Baganga">Baganga</option>
<option value="CompostelaValey" id="Maragusan">Maragusan</option>
<option value="DavaoOriental" id="MatiCity">MatiCity</option>
</select>
</p><br><br>
<p>SELECT YOUR THE BARANGAY
<select type="text" id="brgy">
<option value="">Please Select Your Barangay</option>
<option value="Baganga">Baculin</option>
<option value="Baganga">Batawan</option>
<option value="Baganga">Batiano</option>
<option value="Baganga">Binondo</option>
<option value="Baganga">Bobonao</option>
<option value="Baganga">Campawan</option>
<option value="Baganga">Central</option>
<option value="Baganga">Dapnan</option>
<option value="Baganga">Kinablangan</option>
<option value="Baganga">Lambajon</option>
<option value="Baganga">Lucod</option>
<option value="Baganga">Mahan-ub</option>
<option value="Baganga">Mikit</option>
<option value="MatiCity">Central</option>
<option value="MatiCity">Badas</option>
<option value="MatiCity">Matiao</option>
<option value="Maragusan">kalapagan</option>
</select>
</p><br><br>
問題是它將不正確的資料保存到資料庫中。
uj5u.com熱心網友回復：
您可以使用資料屬性來實作這一點。因此，在您的 html 中，而不是為選項提供相同的值，您可以使用data-any_name="value_in_common"您的選項，然后在您的 jquery 代碼中，您可以使用它$("#city [data-region='" val "']").show();來顯示例外選項。
演示代碼：
$(document).ready(function() {
$("#city option").hide();
$("#brgy option").hide();
$("#region").change(function() {
var val = $(this).val();
$("#city option").hide();
$("#city").val("");
$("#city [data-region='" val "']").show(); //show options where attribute value matches.
$("#city").change();
});
$("#city").change(function() {
var val = $(this).find(":selected").val();
$("#brgy option").hide();
$("#brgy").val("");
$("#brgy [data-city='" val "']").show();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select>
<!--added data attribute-->
<select name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option data-region="DavaoOriental" value="Baganga">Baganga</option>
<option data-region="CompostelaValey" value="Maragusan">Maragusan</option>
<option data-region="DavaoOriental" value="MatiCity">MatiCity</option>
</select>
<!--added data attribute-->
<select id="brgy">
<option value="">Please Select Your Barangay</option>
<option value="Baculin" data-city="Baganga">Baculin</option>
<option value="Batawan" data-city="Baganga">Batawan</option>
<option value="Binondo" data-city="Baganga">Binondo</option>
<option value="Central" data-city="MatiCity">Central</option>
<option value="Badas" data-city="MatiCity">Badas</option>
<option value="Matiao" data-city="MatiCity">Matiao</option>
<option value="kalapagan" data-city="Maragusan">kalapagan</option>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430903.html