Select id 未選擇選項的值

Question

我從我的數據庫中查詢了一些數據，並希望根據我加載的數據預先選擇 select 選項。 我的計划是通過他的 id 獲取未選擇選項的值，然后將 select 值設置為選項值。

例如

我從我的數據庫中獲得了 id 11 。 因此，我嘗試獲取值5 ，然后將其設置為整個 select dish的選定值。

 function doStuff(){ //Try to get the value here $("#dish").val("received value from above") }

 <select id="dish" onload="doStuff()"> <option value="">-----</option> <option id="4" value="4">Cheese</option> <option id="11" value="5">Ham</option> <option id="19" value="6">Fries</option> <option id="31" value="7">Soup</option> </select>

是否有任何解決方案可以通過jQuery或JavaScript實現這一目標？

Answer 1

我將利用Proxy + Reflect和Object.assign()的強大功能將 object 屬性的更改反映到 DOM 中。

這是一個例子：
代理 Object 並通過與相關道具匹配的data-*屬性反映對元素的更改（在此特定情況下為"dish" ）

 const X = (ob) => Object.assign(new Proxy(ob, { set(targ, p, v, recv) { const Rs = Reflect.set(targ, p, v, recv); render(p, v); return Rs; } }), ob); const render = (p, v) => $(`[data-prop="${p}"]`).val(v); // Here's the server data: const serverData = {dish: 5}; // Create a proxy (Will init changes to DOM thanks to Object.assign()) const myData = X(serverData); // Example: Update dynamically (wait 3 and see it happen) setTimeout(() => myData.dish = 7, 3000); // More examples: Open console and set another value to myData.dish like ie: // myData.dish = 4

 The value is added on DOM ready and.<br> Wait for 3 sec to see a dynamic change:<br> <select data-prop="dish"> <option value="">-----</option> <option value="4">Cheese</option> <option value="5">Ham</option> <option value="6">Fries</option> <option value="7">Soup</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

onload事件不適用於 select 元素，這里我添加了一個代碼示例，用於在頁面加載時根據 id 設置 select 選項。

 var valueFromDb="11"; $(document).ready(function(){ $('#dish').val($('#dish #'+valueFromDb).val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="dish" > <option value="">-----</option> <option id="4" value="4">Cheese</option> <option id="11" value="5">Ham</option> <option id="19" value="6">Fries</option> <option id="31" value="7">Soup</option> </select>

Answer 3

您可以添加{selected:true}作為 select 選項的道具，如下所示，

function doStuff(){
  let id="11"
   $(`#${id}`).prop('selected', true);
}