我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:

<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>

然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?


当前回答

我只需将第一个选择选项值设置为默认值,然后使用HTML5的新“隐藏”功能将该值隐藏在下拉列表中。这样地:

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>

其他回答

如果您想使用表单中的值并保持其动态,请尝试使用php

<form action="../<SamePage>/" method="post">


<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  <option <?php if($selected == '1'){echo("selected");}?>>1</option>
  <option <?php if($selected == '2'){echo("selected");}?>>2</option>

</select>
</form>

我使用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 name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>

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

我遇到了这个问题,但这个被接受的、高度支持的答案对我来说不起作用。事实证明,如果你使用的是React,那么设置selected就不起作用了。

相反,您必须直接在<select>标记中设置一个值,如下所示:

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

在React页面上阅读更多关于原因的信息。