HTML选择表单变量默认值

时间:2015-06-15 21:41:29

标签: html html-select javascript-databinding

我正在尝试为HTML选择表单设置默认值。我已经阅读了有关为选择表单设置常量默认值的帖子。但是,我希望默认值为变量 shirt.Color,根据衬衫的不同,可以是小号,中号或大号。

例如,如果shirt.Color为Small,我希望select表单选择Small;如果shirt.Color是Medium,我希望select表单选择Medium;如果shirt.Color很大,我希望选择表格选择大号。

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

<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>

我能为选择表单做些类似的事情吗?我宁愿不为Small,Medium和Large手动编写每个案例。

我尝试过做

<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。

2 个答案:

答案 0 :(得分:1)

您可以使用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' } ];

答案 1 :(得分:0)

你的问题有些模糊,所以我假设你想要做的是为你的选择列表设置一个默认值。要做到这一点,只需在选项标记内添加“selected”,其中包含默认情况下要选择的值。这是一个例子:

<option value="s">Small</option> <option value="m" selected>Medium</option> <option value="l">Large</option> 选择列表的默认值现在为“m”。