基于JavaScript触发器停用元素(css)

Question

根据给定的选择，我想取消元素的ktivate(opt_hello_message_embed_color_title(。如果值为NO，则元素不应处于活动状态。我如何在javascript中实现这一点？

<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>

Answer 1

只需设置禁用属性true即可停用元素

const select = document.querySelector("#opt_hello_message_embed_color_title");
select.disabled = true;

<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>

Answer 2

只是Ahsan答案的一个插件。

如果你想让下拉按钮消失，使用这个：-

const select = document.querySelector("#opt_hello_message_embed_color_title");
select.style.display= "none";// to make the dropdown reappear use select.style.display= "block";

<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>