按id选择未选中选项的值

Question

我从数据库中查询一些数据，并希望根据我加载的数据预先选择选择选项。我的计划是通过id获取未选中选项的值，然后将选择值设置为选项值。

。

我从我的数据库得到id11。因此，我尝试获得值5，并将其设置为整个selectdish的选择值。

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()的强大功能，将对象属性的更改反映到DOM中。

代理一个对象，并通过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 i.e:
// 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}

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