web-dev-qa-db-ja.com

ドロップダウンリストに表示されないデフォルトのテキスト

ユーザーが言語を選択するまで、最初に言語の選択と表示されるselectがあります。ユーザーが選択を開くと、実際のオプションではないため、言語の選択オプションを表示したくありません。

どうすればこれを達成できますか？

htmlhtml-select
92
Vitalii Ponomar

Kyleのソリューション 私にとっては完璧に機能したので、JsとCSSを避ける​​ために研究を行いましたが、HTMLのみを使用しています。ヘッダーとして表示するアイテムにselectedの値を追加すると、最初の場所にプレースホルダーとして表示されます。何かのようなもの：

<option selected disabled>Choose here</option>

完全なマークアップは次の行に沿っている必要があります。

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

これを見ることができます fiddle 、そして結果はここにあります：

enter image description here

しないの場合、ユーザーが選択ボックスをクリックしたときにオプションのリストにプレースホルダーテキストを表示したくない場合は、次のようにhidden属性を追加するだけです：

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

フィドルはこちら と下のスクリーンショットを確認してください。

enter image description here

190
Nobita

解決策は次のとおりです。

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>
52
Prabhu

適切で意味のある方法は、 プレースホルダーラベルオプション を使用することです。

  • option の最初の子として select 要素を追加します
  • value= ""をそのoptionに設定します
  • プレースホルダーテキストをそのoptionのコンテンツとして設定します
  • required 属性をselectに追加します

これにより、ユーザーはフォームを送信できるように別のオプションを選択するように強制され、ブラウザーは必要に応じて render the optionを実行する必要があります。

Select要素にプレースホルダーラベルオプションが含まれる場合、ユーザーエージェントは、コントロールの有効なオプションではなく、ラベルであることを伝える方法でそのオプションをレンダリングすることが期待されます。

ただし、ほとんどのブラウザーは通常のoptionとしてレンダリングします。したがって、次をoptionに追加して、手動で修正する必要があります。

  • selected 属性で、デフォルトで selected にします
  • disabled 属性。ユーザーが選択できないようにします。
  • display: none 、値のリストから非表示にする
select > .placeholder {
  display: none;
}
<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
46
Oriol

selectタグにプレースホルダーを割り当てることはできないため、純粋なHTML/CSSで求めていることを正確に行う方法はないと思います。ただし、次のようなことができます。

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

「言語の選択」はドロップダウンに表示されますが、別のオプションを選択すると、それを再選択することはできません。

それがお役に立てば幸いです。

21
Kyle

これを試して：

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

CSSで：

.selectSelection option:first-child{
    display:none;
}
7
Aakash

選択が完了するまで、選択の上にスパンが表示されるソリューションがあります。スパンにはデフォルトのメッセージが表示されるため、命題のリストには含まれていません。

HTML：

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS：

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript（JQueryを使用）：

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

デモ用のjsfiddle を作成しました。 FirefoxおよびIE8でテスト済み。

5
Baldrick
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

もちろん、必要に応じてcssをcssファイルに移動し、escボタンをキャッチするスクリプトを追加して、無効になっているものを再度選択することができます。 value=""を置く他の同様の答えとは異なり、これは、フォームで選択リストの値を送信する場合、「何かを選択する」が含まれないようにするためです。 var obj = { prop:$('#ddl').val(),...};およびJSON.stringify(obj);でコンパイルされたjsonとして送信されたasp.net mvc 5では、propの値はnullになります。

0
Anders M.

Op1：

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2：

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​
0
Ed Manz