html - tag - select multiple




我如何設置HTML<select>元素的默認值? (12)

所選屬性是一個布爾屬性。

如果存在,它指定應在加載頁面時預先選擇一個選項。

預先選擇的選項將首先顯示在下拉列表中。

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 

我認為在下面的<select>元素中添加一個"value"屬性會導致包含我提供的"value"<option>被默認選中:

<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

但是,這並沒有像我預期的那樣工作。 我如何設置默認選擇哪個<option>元素?


你可以這樣做:

<select name="hall" id="hall">
    <option> 1 </option>
    <option> 2 </option>
    <option selected> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
</select> 

在選項標籤內提供“選定”關鍵字,您希望默認顯示在您的下拉列表中。

或者你也可以給選項標籤提供屬性即

<option selected="selected">3</option>

另一個例子; 使用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);

如果你想使用表格中的值並保持動態,請使用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>

如果您使用角度為1的select,那麼您需要使用ng-init,否則,不會選擇第二個選項,因為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>

如果您處於反應狀態,則可以在選擇標記中使用defaultValue作為屬性而不是value


selected="selected"為您想要成為默認選項的選項。

<option selected="selected">
3
</option>

對的回答有所改進。 您也可以通過隱藏元素'選擇此處'來改善下拉列表的視覺效果。

<select>
  <option selected disabled 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>


我就是這麼做的......

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

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

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

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>

我更喜歡這樣的:

<select>
   <option selected 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>

選擇選項後,'選擇此處'消失。


我遇到了這個問題,但接受並且高度贊成的答案對我並不適用。 事實證明,如果你正在使用React,那麼設置selected不起作用。

相反,您必須直接在<select>標籤中設置一個值,如下所示:

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

在React頁面閱讀更多關於為什麼在這裡


此代碼使用PHP設置HTML選擇元素的默認值。

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>






html-select