ข้อความเริ่มต้นซึ่งจะไม่ปรากฏในรายการแบบเลื่อนลง

ฉันมีรายการselectที่แสดงเลือกภาษาในตอนแรกจนกว่าผู้ใช้จะเลือกภาษา เมื่อผู้ใช้เปิดการเลือกฉันไม่ต้องการให้แสดงตัวเลือกเลือกภาษาเพราะไม่ใช่ตัวเลือกจริง

ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

โซลูชันของ 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>

คุณสามารถดูซอนี้และนี่คือผลลัพธ์:

หากคุณไม่ต้องการให้ประเภทของข้อความตัวยึดตำแหน่งปรากฏในรายการตัวเลือกเมื่อผู้ใช้คลิกที่ช่องเลือกเพียงแค่เพิ่ม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เป็นที่ต้องการ:

หากองค์ประกอบที่เลือกมีตัวเลือกป้ายตัวยึดตำแหน่งตัวแทนผู้ใช้คาดว่าจะแสดงผลอ็อพชันนั้นในลักษณะที่บ่งบอกว่าเป็นเลเบลแทนที่จะเป็นอ็อพชันที่ถูกต้องของคอนโทรล

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

ฉันมีวิธีแก้ปัญหาโดยมีช่วงแสดงอยู่เหนือตัวเลือกจนกว่าการเลือกจะเสร็จ span แสดงข้อความเริ่มต้นดังนั้นจึงไม่อยู่ในรายการข้อเสนอ:

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 mvc 5 ส่งเป็น json ที่คอมไพล์ด้วยvar obj = { prop:$('#ddl').val(),...};และJSON.stringify(obj);ค่าของ prop จะเป็นโมฆะ

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