web-dev-qa-db-ja.com

デフォルトで無効HTML選択オプションを表示するにはどうすればいいですか？

私はHTMLとPHPに慣れていないので、mysqlテーブルからドロップダウンメニューを作成したいと思います。私は私のページに複数の選択があります、それらの1つは

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

問題は、ユーザーが自分のタグ付けとして「タグ付けの選択」を選択できることですが、利用可能な3つから選択するように指定したいだけです。私は無効として使用しました

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

しかし今、「オプションA」がデフォルトのものになりました。だから私はデフォルトで "Choose Tagging"を設定し、選択からそれを無効にしたいです。それはこれを行う方法ですか。 Mysqlからデータを取得する他のselectでも同じことをする必要があります。どんな提案でもかなりの価値があります。

htmlhtml-select
100
Ankit Sharma

つかいます

<option selected="true" disabled="disabled">Choose Tagging</option>
224
Cris

HTML5で無効なオプションを選択するには：

<option selected disabled>Choose Tagging</option>
12
Pradeep Kumar Prabaharan

私はあなたがオプションを無効にする方法を尋ねることを知っています、しかし私はエンドユーザーの視覚的結果がこの解決策と同じであることを理解します、それはおそらくわずかに少ないリソース要求ですが。

次のように optgroup タグを使用してください。

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>
10
Mandrake

Electron + React最初の2つの選択肢をこのようにしましょう。

<option hidden="true>Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

閉じたときに最初に表示するリストを開いたときに最初に表示する

5
Benjamin
 selected disabled="true"

これを使って。新しいブラウザでも動作します

3
Ronak Bokaria

最初のオプションを空白にしたい人のための別のSELECTタグソリューション。

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>
2
Prashant Shahi - coolboi567

このテクニックを使って無効にすることができます。

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>
1
Siddharth Shukla

Select要素を埋めるためにjQueryを使用している場合は、これを使用できます。

html

<select id="tagging"></select>

js

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

これにより、ユーザーは最初のオプションを無効な見出し（[タグの選択]）として表示し、その他すべてのオプションを選択できます。

enter image description here

1
Cybernetic

hiddenを使用してください。

<select>
  <option hidden>Choose</option>
  <option>Item 1</option>
  <option>Item 2</option>
</select>

これで設定は解除されませんが、デフォルトで表示されている間はオプションで非表示にすることができます。

jsfiddle

1
Thielicious

次のようにデフォルトで選択されているオプションを設定できます。

<option value="" selected>Choose Tagging</option>

私はjavascriptとJQueryを使用してクリックイベントを観察し、別のものが選択された後に最初のオプションを無効にすることをお勧めします。

<select id="option_select" name="tagging">

そしてオプションid

<option value="" id="initial">Choose Tagging</option>

その後：

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

その後、関数を作成するだけです。

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}
0
S_UMan