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);
}