目標：頁面加載時默認選擇產品三，使用Jquery而不是硬編碼。來自 MySQL 的數據： PDID PDNAME pd1 Product One pd2 Product Two pd3 Product Three pd4 Product Four HTML <select id="product-selection"> </select>jQuery $(document).ready(function() { $.post('load.php', { req: 'load_product' }, function(data, status) { $("#product-selection").empty().append(data); }); // $('#product-selection').val("pd3"); <-Refer to Item 5. Problem }); Callback Return: <option selected disabled></option> <option value="pd1">Product One</option> <option value="pd2">Product Two</option> <option value="pd3">Product Three</option> <option value="pd4">Product Four</option>在這個階段一切都很好。下拉選擇加載了回調值。問題：已在 Jquery 中嘗試過以下操作，但加載頁面時未選擇 pd3。 1. $('#product-selection').val("pd3"); 2. $('#product-selection').val("pd3").change(); 3. $('#product-selection').val("pd3").trigger('change'); 4. $('#product-selection option[value="pd3"]').prop('selected', true); 5. $('#product-selection option[value="pd3"]').prop('selected', true).change(); 6. $('#product-selection option[value="pd3"]').prop('selected', true).trigger('change'); Have tried prop / attr, ('selected', true) / ('selected', 'selected') as well. Not working.感謝是否可以提供任何解決方案。謝謝。
2 回答
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
以下兩種變體都對我有用：
$('#product-selection option[value="pd3"]').prop("selected", true)
$('#product-selection option[value="pd3"]').prop("selected", "selected")
確保在插入來自服務器的 HTML后運行此代碼：
$(document).ready(function() {
$.post('load.php', {
req: 'load_product'
}, function(data, status) {
$("#product-selection").empty().append(data);
// Selection code needs to go into this callback,
// which is executed after the response comes back.
$('#product-selection option[value="pd3"]').prop("selected", "selected")
});
// Selection code SHOULD NOT be here, because this is executed
// right after the POST request is made.
// When code at this place is executed, the response has most
// likely not come back yet.
});
慕碼人8056858
TA貢獻1803條經驗 獲得超6個贊
請檢查一下。您可以設置動態值“pdvalue”。當頁面加載時你可以使用它。
var pdvalue = "pd2";
$(document).ready(function() {
$.post('load.php', {
req: 'load_product'
}, function(data, status) {
$("#product-selection").empty().append(data);
});
// $('#product-selection').val("pd3"); <-Refer to Item 5. Problem
});
(function setpd(){
$('#product-selection option[value="'+ pdvalue +'"]').prop("selected", true)
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select id="product-selection">
<option selected disabled></option>
<option value="pd1">Product One</option>
<option value="pd2">Product Two</option>
<option value="pd3">Product Three</option>
<option value="pd4">Product Four</option>
</select>
- 2 回答
- 0 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消