我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:
<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?
我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:
<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?
当前回答
<select>的问题是,它有时与当前渲染的状态断开连接,除非选项列表中发生了更改,否则不会返回更改值。当试图从列表中选择第一个选项时,这可能是一个问题。下面的代码可以获得第一次选择的第一个选项,但onchange=“changeFontSize(this)”本身不会。上面描述了一些方法,使用伪选项强制用户更改值以拾取实际的第一个值,例如使用空值开始列表。注意:onclick将调用该函数两次,以下代码没有调用,但解决了第一次出现的问题。
<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extraLarge">Extra large</option>
</select>
<script>
function changeFontSize(x){
body=document.getElementById('body');
if (x.value=="extraLarge") {
body.style.fontSize="25px";
} else {
body.style.fontSize=x.value;
}
}
</script>
其他回答
我自己用
<select selected=''>
<option value=''></option>
<option value='1'>ccc</option>
<option value='2'>xxx</option>
<option value='3'>zzz</option>
<option value='4'>aaa</option>
<option value='5'>qqq</option>
<option value='6'>wwww</option>
</select>
残疾人在这种情况下不友好
完整示例:
<select name=“hall”id=“hall”><option>1</option><option>2</option><option selected>3</option><选项>4</选项><选项>5</选项></选择>
我使用Angular,并通过以下方式设置默认选项
HTML模板
<select #selectConnection [(ngModel)]="selectedVal" class="form-control col-sm-6 " max-width="100px" title="Select"
data-size="10">
<option >test1</option>
<option >test2</option>
</select>
脚本:
sselectedVal:any="test1";
我认为最好的方法是:
<select>
<option value="" selected="selected" hidden="hidden">Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
为什么不禁用?
当您将禁用属性与<button type=“reset”>一起使用时,重置</button>值不会重置为原始占位符。相反,浏览器选择第一个未禁用选项,这可能会导致用户错误。
默认空值
每个生产表单都有验证,那么空值应该不是问题。这样我们可能会有空的不需要的选择。
XHTML语法属性
selected=“selected”语法是兼容XHTML和HTML5的唯一方法。这是正确的XML语法,一些编辑可能对此感到高兴。它更向后兼容。如果XML遵从性很重要,则应遵循完整的语法。