HTML Select 表单变量默认值

Question

我正在尝试为 HTML select 表单设置默认值。我已经阅读了有关为 select 表单设置常量默认值的帖子。但是，我希望默认值为变量 shirt.Color，它可以是小号、中号或大号，具体取决于衬衫。

例如，如果 shirt.Color 是 Small，我希望 select 表格具有 Small selected；如果 shirt.Color 是 Medium，我希望 select 表单具有 Medium selected；如果 shirt.Color 是 Large，我希望 select 表格有 Large selected.

我知道如何使用数据绑定为文本框设置默认值。我使用以下设置默认衬衫颜色：

<div class="form-group">
    <label class="control-label col-sm-2">Shirt Color</label>
    <input type="text" name="color" data-bind="valueUpdate: 'input', value:shirt.Color" class="form-control" required />
</div>

我可以为 select 表单做一些类似的简单操作吗？我不想为小型、中型和大型的每个案例手动编码。

我试过

<div class="form-group">
    <label class="col-sm-2 control-label col-sm-2">Shirt Size:</label>
    <select required name="type" data-bind="type: 'input', value: shirt.Size">
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
    </select>
</div>

但是，这始终默认为第一个选项，Small。

Answer 1

你的问题有点含糊，所以我假设你想做的是为你的 select 列表设置一个默认值。为此，只需在选项标签内添加 "selected"，该标签包含您希望默认设置为 select 的值。这是一个例子：

<option value="s">Small</option> <option value="m" selected>Medium</option> <option value="l">Large</option> select 列表的默认值现在是 "m"。

Answer 2

您可以为此使用 kendoDropDownList。

<div data-bind="kendoDropDownList: { data: shirtSizes, dataTextField: 'SizeName', dataValueField: 'SizeId', value: shirt.Size } />

其中 shirtColors 是一个包含 ColorName 和 ColorId 字段的数组。

var shirtSizess = [ { SizeId: 's', SizeName: 'Small' }, { SizeId: 'm', SizeName: 'Medium' }, { SizeId: 'l', SizeName: 'Large' } ];

HTML Select 表单变量默认值

HTML Select Form Variable Default Value

html

html-select

javascript-databinding