HTMLの<select>要素のデフォルト値を設定するにはどうすればよいですか?


1458

以下"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>デフォルトで選択される要素を設定するにはどうすればよいですか?


うわー、この質問はとても役に立ち、文字通りバイラルになりました
フィングラス

回答:


2151

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

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

19
<option value = "3" selected = "selected"> 3 </ option>オプション3が選択されている場合、値は文字列として渡されます。
スリーラマ2013

5
<select>のid属性を引き続き使用します。<select> html要素にvalue属性を使用することはお勧めできません。
スリーラマ2013

216
= "selected"の部分は必要ありません。<option selected>だけで、他の回答で述べたように動作します。
MindJuice 2014

56
@MindJuice私が書いたものは、有効なポリグロットHTML / XMLです。ブラウザでは<option selected>の使用は問題ありませんが、ドキュメントが他のパーサーによって拒否される可能性があります。WebドキュメントでXPath / XSLTを時々使用できると便利です。
Borealid 2014年

70
Angularを使用している場合ng-model、デフォルトの選択値をオーバーライドすることに注意してください(バインドされたオブジェクトを設定しなかった場合は未定義としても)。そのため、selected="selected"オプションが選択されなかった理由を理解するのにしばらく時間がかかりました。
metakermit 2015

626

既定のテキストを一種のプレースホルダー/ヒントとして使用したいが、有効な値(「ここに入力」、「国を選択」など)とは見なされない場合は、次のようにします。

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


60
これはほとんどの人が探しているものだと思います。いい答えです。
chrisallick

1
これは外部のjsfiddleで、CSSは画面の境界に沿って表示されないようにするためだけに必要でした。数か月後にそれはインラインコードスニペットに編集され、編集した人は単にそれを例に残しました。本当に気になる場合は、編集してスニペットから削除できます。
のび太

さらに良い解決策は、hidden代わりに属性を使用することです。参照してください@以下のチョン・リップ・パンガーの答え:stackoverflow.com/a/39358987/1192426
イワンAkulov

<option value="" selected disabled hidden>Choose here</option>

1
素晴らしい答え!
japes Sophey

234

完全な例:

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


11
これは、selected = "selected"を使用するよりも簡単です。
ロドリゴ

57
selected = "selected"はすべてのdoctypeで機能するはずです。XHTMLは、値のない属性を好みません。
ps2goat 2014

14
@ロドリゴ本当に書くのは難しいselected="selected"ですか?つまり、何を節約していますか?時間?サイズ?それはごくわずかであり、コードをより「準拠」させる場合は、なぜそれを行わないのですか?
xDaizu 2016

15
@DanielParejoMuñoz、わかりました、ごくわずかです。しかし、私のdoctypeがhtmlであり、xhtmlではない場合、なぜバイトをまったく無駄にしますか?
ロドリゴ

5
selected = "selected"はエラーのようです。2、3か月以内に、アイテム3が選択されたことを意味すると考えて、おそらくselected = "3"に変更します。(そして私のページを壊す)
Paul McCarthy

92

私はこの質問に出くわしましたが、受け入れられ、非常に賛成された答えは私にはうまくいきませんでした。Reactを使用している場合、設定selectedが機能しないことがわかります。

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

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

理由については、こちらのReactページをご覧ください


2
タグのvalue属性を使用して、ドロップダウンリストで事前に選択されたオプションを設定できます<select>。つまり<select value="3">、W3Cバリデーターでは無効です。
使徒

4
そうですが、これはHTMLではなく、JSXなので、W3Cのルールに従う必要はありません。最後にReactによって生成されたHTMLは有効です。
MindJuice

完全な世界では、これは有効な回答ではないため、質問に対するコメントでした。しかし、私はそれが固執するのに十分な価値があると思います。
Justus Romijn 2017

2
上記の提案と同様のソリューションが必要でしたが、Reactの代わりにJQueryを使用しました。将来的に役立つ場合:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK 2018年

この答えは有効ではありません。根本的な質問は、ReactではなくHTML(JSX)についてです。
アーロンC

72

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

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

13
明確にするために、w3標準は<option selected = "selected"> 3 </ option>です
htmldrum

40
@JRM私が言っていることは、ドキュメントがXHTMLに準拠するためには、属性に値がなければならないということです。HTMLでは、「selected = selected」は必要ありません。上の例w3.org/wiki/HTML/Elements/selectdeveloper.mozilla.org/en-US/docs/HTML/Element/selectは値を指定しません。注意すべき重要なことは、それselected="false"が許可されておらず、selected=""またそれが選択されることです。オプションを選択しないようにする唯一の方法は、属性を削除することです。w3.org/html/wg/drafts/html/master/…–
ファンメンデス、

3
このような質問がどのように賛成票を投じられるか、私には理解できません。彼らはまだ正解のようです。2年後lol
Phil

51

フォームの値を使用して動的に保ちたい場合は、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>

40

私はこれが好きです:

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

オプションを選択すると、[ここを選択]が消えます。


1
試してみましたが、「ここを選択」が表示されません。最初のオプションは空です
Bogdan Mates

どのブラウザを使用していますか?
Chong Lip Phang

私はGoogle Chromeブラウザーバージョン52.0.2743.116 mを使用しています
Bogdan Mates

2
私もそのブラウザを使用しており、問題は発生していません。
Chong Lip Phang

2
value=""空の値を確実に取得するために追加することを検討してください。
Ryan Walton

31

のび太の答えの改善。また、「ここで選択」という要素を非表示にすることで、ドロップダウンリストの視覚的な表示を改善できます。

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


25

私の意見では最良の方法:

<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">Reset</button>値を、元のプレースホルダーにリセットされません。代わりに、ブラウザは最初に無効化されていないオプションを選択します。これはユーザーのミスを引き起こす可能性があります。

デフォルトの空の値

すべてのプロダクションフォームには検証があるため、空の値は問題になりません。このようにして、必要のない選択を空にすることができます。

XHTML構文属性

selected="selected"構文は、XHTMLとHTML 5の両方と互換性がある唯一の方法です。これは正しいXML構文であり、一部のエディターはこれに満足している可能性があります。より下位互換性があります。私はこれについてはあまり強く感じていませんが、上記の引数が要件である場合は、完全な構文に従う必要があります。


それは私にとってオプション全体を隠す
ADEL NAMANI

@ADELNAMANIコードへのリンクを提供できますか?あなたの問題は私の答えとは関係がないと思います。
のMichałMielecの

19

もう一つの例; JavaScriptを使用して、選択したオプションを設定します。

(この例を使用して、値の配列をドロップダウンコンポーネントにforループすることができます)

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

それel.selected = "selected";はw3標準に準拠するべきではありませんか?
7yl4r 2014年

5
7yl4r号@ selectedW3Cによって定義されたブール特性である- w3.org/TR/html401/interact/forms.html 選択`17.6.1事前選択されたオプション[CI] -このオプションであることをセット、このブール属性を指定`選択の詳細については、w3cスクール-w3schools.com/jsref/prop_option_selected.asp
Ally

14

選択属性は論理属性です。

存在する場合は、ページの読み込み時にオプションを事前に選択する必要があることを指定します。

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

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

10

反応している場合は、selectタグのdefaultValue代わりに属性として使用できますvalue


7

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

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

$ endminがページが読み込まれるたびに_POST変数から作成される場合(このコードは投稿するフォーム内にあります)、以前に選択された値がデフォルトで選択されます。


4

タグの値属性がないため、選択したとおりに表示されません。デフォルトで、タグに値属性が設定されている場合、最初のオプションがドロップダウンページの読み込み時に表示されます。...この方法で問題を解決しました


4

このコードは、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>

3

以下を使用できます。

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

の代わりに、

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

どちらも同じように正しいです。


3

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

私自身が使っています

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

2

要素を選択するのではなく、特定のオプションに「選択された」属性を配置するだけです。

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

   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>


2

オプションの値が3であるselected = "selected"を設定します

以下の例をご覧ください

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

Firefoxでは、ページの再読み込みでは機能しません
Sebastian

私のシステムでは、Firefoxでの作業
Akbor

1

問題<select>は、現在レンダリングされている状態と切断されることがあり、オプションリストで何かが変更されない限り、変更値が返されないことです。これは、リストから最初のオプションを選択しようとするときに問題になる可能性があります。次のコードでは、最初に選択されたオプションを最初に選択できますが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>

1

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

0

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

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

4
このソリューションにはいくつかの不一致があるようです。要素の名前が「select」の場合、$ _ POST変数キーを「select」にしてはいけません。「drop_down」はどこから来たのですか?また、それがエラーであり、これが実際に$ _POST ['select']変数の値をチェックしていると仮定すると、空でない値はすべてtrueを返すため、すべての<option>項目は「選択済み」とマークされます。多分私はこの答えに不可欠な何かを逃していますか?
ライアン

0

このように試すことができます

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

0

HTMLスニペット:

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

ネイティブJavaScriptスニペット:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

0
Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.