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

私が持ってselect示し、最初はどの言語選択をユーザーが言語を選択するまで。ユーザーが選択を開いたときに、実際のオプションではないため、[言語の選択]オプションを表示しないようにします。

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

カイルのソリューションは完璧に機能したので、Jと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>

このフィドルを見てみましょう。結果は次のとおりです。

あなたがいる場合はありません選択ボックスをユーザーがクリックするだけで追加すると、プレースホルダーテキストの並べ替えオプションにリストされて表示させたい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>

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

これが解決策です：

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

適切でセマンティックな方法は、プレースホルダーラベルオプションを使用することです。

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

これにより、ユーザーはフォームを送信できるようにするために別のオプションを選択する必要があり、ブラウザは必要に応じてをレンダリングするoption必要があります。

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

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

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

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

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

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

お役に立てば幸いです。

これを試して：

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

CSSで：

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

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

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でテスト済み。

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

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

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