我该如何动态设置'< option>`标签上的`selected`属性？ [英] How can I dynamically set the `selected` attribute on an `<option>` tag?

问题描述

绑定数据属性指南说如果您使用布尔值进行数据绑定，它将添加或删除指定的属性。我试图使用这个特性来动态设置< option> s上的选定的属性。我发现我可以动态设置禁用属性，但是选定的属性总是被省略，

给定这个句柄模板：

  < option disabled = {{false}} selected = {{false}}>一个< / option> 
< option disabled = {{true}} selected = {{true}}> Two< / option> 
  

我得到以下HTML：

 <选项 - 酮< /选项> 
< option已禁用>两个< / option> 
  

为什么不是 selected = {{true}} 在呈现的输出中产生一个选定的属性？

---

为了提供更多的上下文，我正在关注如何在Ember 2.0中进行选择。使用该文章中描述的方法，当选择 onchange 事件触发时，我可以成功更新控制器中的数据，但DOM不会更新以反映更改。

我放在一起这个ember-twiddle ，其中包含两个 select 元素。一个使用 select = {{bool}} ，这不符合我的要求。另一个使用长手 {{＃if bool}} ... {{else}} ... {{/ if}} 可怕的。

解决方案

感谢大家花时间发布答案我的问题。 Sonny 的评论指出了我的正确方向：

选中是一个属性，而不是具有值的属性

这对我来说是新闻，它让我发现了一个发现的兔子洞。我发现这个SO答案特别有用。

当我发布了这个问题，我不明白属性和属性之间的区别。我期待看到选定的属性出现在DOM中，但这不会发生。我现在明白正确设置 属性，并且< option> 标签不会出现在DOM中，并且属性被选中属性无关紧要。



代码片段有助于说明为什么我感到困惑。得到的< select> 下拉菜单都显示为相同，最初选择了选项2。使用 selected = {{true}} 设置时，选择的属性不会出现在DOM中，但它确实在另一种情况下出现在DOM中：



 < select> 
< option> 1< / option> 
< option selected = {{true}}> 2< / option> 
< / select> 
 
< select> 
< option> 1< / option> 
< option selected> 2< / option> 
< / select> 
  

以下是与Twiddle相同的片段

The Ember guide on binding data attributes says that "If you use data binding with a Boolean value, it will add or remove the specified attribute." I'm trying to use this feature to dynamically set the selected attributes on <option>s. I'm finding that I can dynamically set the disabled attribute, but the selected attribute is always omitted, no whether the boolean is true or false.

Given this handlebars template:

<option disabled={{false}} selected={{false}}>One</option>
<option disabled={{true}} selected={{true}}>Two</option>

I get the following HTML:

<option>One</option>
<option disabled>Two</option>

Why doesn't selected={{true}} produce a selected attribute in the rendered output?

---

To give a bit more context, I'm following this article on How to do a select in Ember 2.0. Using the method described in that article, I can successfully update the data in the controller when the select onchange event fires, but the DOM doesn't update to reflect the change.

I've put together this ember-twiddle, which includes two select elements. One uses select={{bool}}, which doesn't work the way I want it to. The other uses a long-hand {{#if bool}}...{{else}}...{{/if}}, which does work but looks terrible.

解决方案

Thanks to everyone who took the time to post an answer my question. Sonny's comment pointed me in the right direction:

selected is a property, not an attribute with a value

This was news to me and it sent me down a rabbit-hole of discovery. I found this SO answer to be especially helpful.

When I posted the question, I didn't appreciate the difference between attributes and properties. I was expecting to see the selected attribute appear in the DOM, but this doesn't happen. I now understand that the selected property is being correctly set, and the fact that the <option> tag doesn't appear in the DOM with a selected attribute is of no consequence.

This code snippet helps to illustrate why I was confused. Both of the resulting <select> dropdown menus appear the same, with option 2 initially selected. The selected attribute does not appear in the DOM when it's set using selected={{true}}, but it does appear in the DOM in the other case:

<select>
  <option>1</option>
  <option selected={{true}}>2</option>
</select>

<select>
  <option>1</option>
  <option selected>2</option>
</select>

Here's the same snippet as a Twiddle

这篇关于我该如何动态设置'< option>`标签上的`selected`属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！