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

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

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


当前回答

如果将select与angular 1一起使用,则需要使用nginit,否则,将不会选择第二个选项,因为ng-model会覆盖默认的选定值

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</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>

另一个例子;使用JavaScript设置所选选项。

(您可以使用此示例将值数组循环到下拉组件中)

<select id=“yourDropDownElementId”><select/>

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

您只需要将属性“selected”放在特定选项上,而不是直接指向select元素。

下面是具有不同值的相同和多个工作示例的代码片段。

选择选项3:-<select name=“hall”id=“hall”><option>1</option><option>2</option><option selected=“selected”>3</option><选项>4</选项><选项>5</选项></选择><br/><br/><br/>选择选项5:-<select name=“hall”id=“hall”><option>1</option><option>2</option><option>3</option><选项>4</选项><option selected=“selected”>5</option></选择><br/><br/><br/>选择选项2:-<select name=“hall”id=“hall”><option>1</option><option selected=“selected”>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>

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

我使用这个php函数生成选项,并将其插入到HTML中

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

然后在我的网页代码中,我使用它如下:;

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

如果每次加载页面时都从_POST变量创建$endmin(并且此代码位于发布的表单中),则默认情况下会选择先前选择的值。