Văn bản mặc định sẽ không được hiển thị trong danh sách thả xuống

Tôi có một selecttrong đó ban đầu hiển thị Chọn ngôn ngữ cho đến khi người dùng chọn một ngôn ngữ. Khi người dùng mở lựa chọn, tôi không muốn nó hiển thị tùy chọn Ngôn ngữ chọn vì nó không phải là một tùy chọn thực tế.

Làm thế nào tôi có thể đạt được điều này?

Giải pháp của Kyle hoàn toàn phù hợp với tôi vì vậy tôi đã thực hiện nghiên cứu của mình để tránh bất kỳ Js và CSS nào mà chỉ gắn bó với HTML. Việc thêm giá trị selectedvào mục mà chúng tôi muốn xuất hiện dưới dạng tiêu đề buộc nó phải hiển thị ở vị trí đầu tiên dưới dạng trình giữ chỗ. Cái gì đó như:

<option selected disabled>Choose here</option>

Đánh dấu hoàn chỉnh phải nằm dọc theo các dòng sau:

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

Bạn có thể xem qua trò chơi này và đây là kết quả:

Nếu bạn không muốn loại văn bản giữ chỗ xuất hiện được liệt kê trong các tùy chọn khi người dùng nhấp vào hộp chọn, chỉ cần thêm hiddenthuộc tính như sau:

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

Kiểm tra fiddle ở đây và ảnh chụp màn hình bên dưới.

Đây là giải pháp:

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

Cách phù hợp và đúng ngữ nghĩa là sử dụng tùy chọn nhãn giữ chỗ :

• Thêm một optionphần tử làm phần tử con đầu tiên củaselect
• Đặt thành đóvalue= ""option
• Đặt văn bản trình giữ chỗ làm nội dung của văn bản đó option
• Thêm requiredthuộc tính vàoselect

Điều này sẽ buộc người dùng lựa chọn tùy chọn khác để có thể gửi biểu mẫu, và các trình duyệt nên làm cho các optionnhư mong muốn:

Nếu một phần tử được chọn có chứa tùy chọn nhãn chỗ dành sẵn, thì tác nhân người dùng sẽ hiển thị tùy chọn đó theo cách truyền đạt rằng đó là một nhãn, thay vì tùy chọn hợp lệ của điều khiển.

Tuy nhiên, hầu hết các trình duyệt sẽ hiển thị nó như bình thường option. Vì vậy, chúng tôi sẽ phải sửa nó theo cách thủ công, bằng cách thêm phần sau vào option:

• Các selectedthuộc tính, để làm cho nó chọn theo mặc định
• Các disabledthuộc tính, để làm cho nó không thể lựa chọn bởi người sử dụng
• display: none, để ẩn nó khỏi danh sách các giá trị

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Bởi vì bạn không thể sử dụng chỉ định trình giữ chỗ cho selectthẻ, tôi không tin rằng có bất kỳ cách nào để thực hiện chính xác những gì bạn đang yêu cầu với HTML / CSS thuần túy. Tuy nhiên, bạn có thể làm điều gì đó như sau:

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

"Chọn ngôn ngữ" sẽ hiển thị trong menu thả xuống, nhưng khi một tùy chọn khác được chọn, bạn sẽ không thể chọn lại tùy chọn đó.

Tôi hy vọng rằng sẽ giúp.

Thử cái này:

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

Trong CSS:

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

Tôi có một giải pháp với một khoảng được hiển thị phía trên vùng chọn cho đến khi lựa chọn được thực hiện. Khoảng cách hiển thị thông báo mặc định và do đó, nó không có trong danh sách các mệnh đề:

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 (với 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();
        }
    });
});

Tôi đã tạo một jsfiddle cho bản demo . Đã thử nghiệm với Firefox và IE8.

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

tất nhiên bạn có thể di chuyển css sang tệp css nếu bạn muốn và đặt một tập lệnh để bắt escnút chọn lại bị vô hiệu hóa. Không giống như các câu trả lời tương tự khác mà tôi đã đặt value="", điều này là do đó nếu bạn gửi (các) giá trị của danh sách lựa chọn của mình bằng một biểu mẫu, nó sẽ không chứa "đã chọn một cái gì đó". Trong asp.net, mvc 5 được gửi dưới dạng json được biên dịch với var obj = { prop:$('#ddl').val(),...};và JSON.stringify(obj);giá trị của prop sẽ là 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');​​​​​​​