web-dev-qa-db-ja.com

HTMLの<select>要素にデフォルト値を設定する方法を教えてください。

以下の"value"要素に設定された<select>属性を追加することは私の提供された<option>を含む"value"がデフォルトで選択されることを引き起こすと思いました：

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

しかし、これは私が思っていたようにはうまくいきませんでした。どの<option>要素がデフォルトで選択されているのかを設定するにはどうすればいいですか？

htmlhtml-select
1211
Jichao

デフォルトにしたいオプションにselected="selected"を設定します。

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

デフォルトのテキストを一種のプレースホルダー/ヒントとして使用したいが、有効な値とは見なされない場合（「ここで完了」、「国を選択する」など）、次のようにします。

<select>
  <option value="" 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>

418
Nobita

完全な例：

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

214
RedFilter

私はこの質問に出くわしました、しかし、広く受け入れられて支持された答えは私のために働かなかった。もしあなたがReactを使っているなら、selectedの設定はうまくいかないことがわかります。

代わりに、以下のように直接<select>タグに値を設定する必要があります。

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

その理由についてもっと読んでください ここでReactページに 。

63
MindJuice

あなたはこれのようにそれをすることができます：

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

ドロップダウンリストにデフォルトで表示するオプションタグの中に「selected」キーワードを入力します。

あるいは、オプションタグに属性を与えることもできます。 

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

もしあなたがFormの値を使い動的にしたいのなら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>
47
Florian

私はこれが好きです：

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

オプションを選択すると、「ここで選択」は消えます。

35
Chong Lip Phang

nobita の回答に対する改善。また、要素「ここを選択」を非表示にすることで、ドロップダウンリストの表示を改善することもできます。

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

27
Salitha Prasad

もう一つの例; 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);
16
Ally

selected 属性はブール属性です。

存在する場合、それはページがロードされるときにオプションが事前に選択されるべきであることを指定します。

事前に選択されたオプションはドロップダウンリストの最初に表示されます。

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

あなたが反応しているのなら、selectタグでdefaultValueの代わりにvalueを属性として使うことができます。

6
Johan

角度1の選択を使用している場合はng-initを使用する必要があります。それ以外の場合は、ng-modelがデフォルトの選択値を上書きするため、2番目のオプションは選択されません

<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>
4
Akshay Vijay Jain

私はこの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;
  }

?>

そして私のWebページのコードでは、以下のように使用しています。

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

ページがロードされるたびに_POST変数から$ endminが作成されると（このコードは投稿するフォームの中に入ります）、デフォルトで以前に選択された値が選択されます。

3
Graeme

tagのvalue属性が欠落しているので、選択したとおりに表示されません。 value属性がtagに設定されている場合、デフォルトではドロップダウンページのロード時に最初のオプションが表示されます。

3
X-Coder

このコードは、PHPのHTML select要素のデフォルト値を設定します。 

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

最初の選択オプションの値を単にデフォルトにして、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>
2
Ahmedakhtar11

あなたが使用することができます：

<option value="someValue" selected>Some Value</option>

の代わりに、

<option value="someValue" selected = "selected">Some Value</option>

どちらも同様に正しいです。

2
Samim

私は自分で使います 

<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>
1
Юрий Светлов

<select>の問題は、現在レンダリングされているものの状態と関連がなく、オプションリストで何かが変更されていない限り、変更値が返されないことです。リストから最初のオプションを選択しようとすると、これが問題になる可能性があります。次のコードでは、first-optionを最初に選択したときに取得できますが、onchange="changeFontSize(this)"自体では取得できません。空の値でリストを開始するなど、ユーザーに実際の最初の値を選択するための変更値を強制するためのダミーオプションを使用した上記の方法があります。注：onclickは関数を2回呼び出しますが、次のコードは呼び出しませんが、初めての問題は解決します。

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

これは私がやった方法です...

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

私の考えでは最善の方法：

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

無効にしないのはなぜですか。

Disabled属性を<button type="reset">Reset</button>値と一緒に使用すると、元のプレースホルダーにリセットされません。代わりに、ブラウザは最初に無効にされていないオプションを選択します。これはユーザーのミスを引き起こす可能性があります。

デフォルトの空の値

すべての制作フォームに検証があるので、空の値は問題になりません。このようにして、空ではなく選択することができます。

XHTMLの構文属性

selected="selected"構文は、XHTMLとHTML 5の両方と互換性がある唯一の方法です。これは正しいXML構文であり、一部の編集者はこれに満足しているかもしれません。より下位互換性があります。私はこのことについて強い気持ちは持っていませんが、上記の議論があなたの要求であるならば、あなたは完全な構文に従うべきです。

0
Michał Mielec

特定のオプションに属性 "selected"を設定するだけで、要素を直接選択する必要があります。

これは、異なる値を持つ同じおよび複数の動作例のスニペットです。

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>

0
Ambuj Khanna