ডিফল্ট পাঠ্য যা ড্রপ-ডাউন তালিকায় প্রদর্শিত হবে না

Question

আমার একটি রয়েছে selectযা ব্যবহারকারী প্রাথমিকভাবে ভাষা নির্বাচন না করা পর্যন্ত প্রাথমিকভাবে ভাষা নির্বাচন করুন । যখন ব্যবহারকারী নির্বাচনটি খুলেন, আমি চাই না এটি একটি নির্বাচন ভাষা দেখায় বিকল্পটি , কারণ এটি কোনও আসল বিকল্প নয়।

আমি কীভাবে এটি অর্জন করতে পারি?

Answer 1

কাইলের সমাধানটি আমার পক্ষে পুরোপুরি সূক্ষ্মভাবে কাজ করেছিল তাই আমি কোনও জেএস এবং সিএসএস এড়াতে আমার গবেষণাটি তৈরি করেছিলাম, তবে কেবল এইচটিএমএল দিয়ে আঁকছি। 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>

পরীক্ষা করে দেখুন বেহালার এখানে এবং নীচের স্ক্রীনশট।

Comments

এটি দুর্দান্ত উত্তর তবে কৌণিক জেএস ব্যবহার করার পরে এটি কার্যকর হয় না কারণ অ্যাংুলার স্বয়ংক্রিয়ভাবে একটি খালি বিকল্প যোগ করে এবং এটি ডিফল্ট হিসাবে সেট করে

— ডেনিস ওয়্যাননিয়ি

যাই হোক, শুধু রেফারেন্স জন্য, এখানে কিভাবে আপনি কৌণিক কাজ কী হবে, শুধু কৌণিক নির্দিষ্ট সাথে উপরে পদ্ধতির মেশা ব্যাখ্যা এর এখানে metaltoad.com/blog/...

— Nobita

মনে রাখবেন যে hidden অ্যাট্রিবিউট , উত্তর উপরে ব্যবহৃত একটি বৈশিষ্ট্য কোনো HTML উপাদান সেট করা যেতে পারে, এবং সাধারণত (কিন্তু অগত্যা না) সেটিং সমতূল্য হতে বাস্তবায়িত হয় display: noneCSS এর সঙ্গে।

— মার্ক অ্যামেরি

নোট যে সেটিং hiddenএকটি অন optionএকটি selectসাফারি কাজ করে না, হয় iOS বা ম্যাক। এই উত্তরটি কেবলমাত্র আংশিক ব্রাউজার সমর্থন সরবরাহ করে।

— মার্ক অ্যামেরি

এটা সুন্দর!

— Fibo Kawalsky

Answer 2

সমাধান এখানে:

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

Comments

নোট যে selected="true"অবৈধ। পরিবর্তে, selected="selected"(এক্স) এইচটিএমএল বা কেবল selectedএইচটিএমএলে ব্যবহার করুন। দেখে মনে হচ্ছে আপনি সম্পত্তির selectedসাথে বিভ্রান্তিযুক্ত বৈশিষ্ট্য selectedযা এইরকম পরিবর্তিত হয়েছে: myOption.selected = true;বাmyOption.selected = false;

— ওরিওল

অ্যান্ড্রয়েড এবং আইওএসের মতো ডিভাইস-নেটিভ নির্বাচনগুলি ব্যবহার করে এমন ব্রাউজারগুলি দ্বারা "প্রদর্শন: কিছুই নয়" উপেক্ষা করা হবে। আপনার অবশ্যই DOM থেকে সিলেক্টে অপশনটি সরিয়ে ফেলতে হবে ocus ফোকাস এবং এটিকে ফেরত পাঠাতে হবে এবং এটিটি নির্বাচন করতে সিলেক্ট করুন b

— রাদেক পেচ

-1; মত ব্যবহার Nobita এর উত্তরhidden (যা "সাধারণত সিএসএস বাস্তবায়িত" ব্যবহার display: noneযাহাই হউক না কেন), ব্যবহার display: noneএকটি অন optionসাফারি কাজ করে না; বিকল্প এখনও উপস্থিত।

— মার্ক

Answer 3

যথাযথ এবং শব্দার্থক উপায় একটি স্থানধারক লেবেল বিকল্পটি ব্যবহার করছে :

• optionপ্রথম সন্তানের হিসাবে একটি উপাদান যুক্ত করুনselect
• সেট যেvalue= ""option
• এর বিষয়বস্তু হিসাবে স্থানধারক পাঠ্য সেট করুন option
• যোগ requiredকরার জন্য এট্রিবিউটselect

এটি ব্যবহারকারীকে ফর্মটি জমা দিতে সক্ষম হতে অন্য বিকল্পটি নির্বাচন করতে বাধ্য করবে এবং ব্রাউজারগুলি রেন্ডার করবেoption :

যদি কোনও নির্বাচিত উপাদানটিতে একটি স্থানধারক লেবেল বিকল্প থাকে, ব্যবহারকারী এজেন্ট নিয়ন্ত্রণের বৈধ বিকল্পের পরিবর্তে এমন একটি উপায়ে যা এই লেবেলকে বোঝায় যে সেই বিকল্পটি রেন্ডার করবে is

তবে, বেশিরভাগ ব্রাউজারগুলি এটিকে স্বাভাবিক হিসাবে রেন্ডার করবে 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>

Comments

এটি লক্ষ করা উচিত যে এমনকি এটি (যা এখানে সমস্ত উত্তরগুলির মধ্যে এই সমস্যার সমাধানের সর্বাধিক চেষ্টা) আইফোন বা ম্যাক উভয়ই সাফারিটিতে কাজ করে না। নির্বাচনটি খোলার পরেও বিকল্পটি থাকবে।

— মার্ক

@ মারক্যামেরি আমি আপনাকে পরামর্শ দিচ্ছি যে এটি আপনি নোবিটা উত্তরে প্রস্তাবিত মত কাজটি করেন এবং কেবল hiddenস্থানধারক বিকল্প ট্যাগটিতে এট্রিবিউট যুক্ত করুন পরিবর্তে display: noneমনে হয় বেশিরভাগ মোবাইল ব্রাউজারগুলি display: noneসিএসএস বৈশিষ্ট্যটিকে উপেক্ষা করে এবং এটি আমার মতে আরও শব্দার্থগতভাবে সঠিক।

— গাবাইক 1

@ গ্যাবিক 1 এই উত্তরের মন্তব্যে আমি উল্লেখ করেছি যে hiddenসাধারণত display: noneহুডের অধীনে প্রয়োগ করা হয় (এবং স্পষ্টভাবে এটি একটি "সাধারণ" বাস্তবায়ন হিসাবে বোঝায়)। যেমন, আমি যদি কোনও ব্রাউজার - মোবাইল বা অন্যথায় - যেখানে hiddenকাজ করেছেন তবে display: noneতা না করে অবাক হয়ে যাব । আপনি কোন উদাহরণ দিতে পারেন?

— মার্ক আমেরিকা

Answer 4

আপনি selectট্যাগের জন্য নিয়োগকারী স্থানধারক ব্যবহার করতে পারবেন না বলে , আমি বিশ্বাস করি না যে আপনি খাঁটি এইচটিএমএল / সিএসএসের সাথে যা চাইছেন ঠিক তা করার কোনও উপায় আছে। আপনি তবে এর মতো কিছু করতে পারেন:

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

"ভাষা নির্বাচন করুন" ড্রপডাউনে প্রদর্শিত হবে, তবে একবার অন্য বিকল্প নির্বাচন করা হলে এটি পুনরায় অনুসন্ধান করা সম্ভব হবে না।

আমি আশা করি এটি সাহায্য করবে.

Comments

আমি দেখতে পেলাম যে সেরাটি অক্ষম এবং নির্বাচিত স্টাইল = "প্রদর্শন: কিছুই নয়" এর সংমিশ্রণ। অক্ষম কার্যকর যখন আপনি বৈধতা সম্পাদন করতে চান - এটি নিশ্চিত করে যে আপনার ডিফল্টরূপে কোনও সক্ষম বিকল্প নেই।

— ইলারিওন কোভালচুক

-1 কারণ এখানে অন্যান্য উত্তরগুলি (উল্লেখযোগ্যভাবে নোবিয়ার এবং ওরিওলস) উভয়ই অনেক বেশি ব্যাখ্যামূলক বিশদ এবং আরও অনেক সম্পূর্ণ সমাধান সরবরাহ করে।

— মার্ক অ্যামেরি

Answer 5

এটা চেষ্টা কর:

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

সিএসএসে:

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

Comments

এই উত্তরে এমন কোনও কিছুই নেই যা অন্যান্য উত্তরগুলিতে আরও বিশদে থাকে না, এবং এর খারাপ ফর্ম্যাটিং থাকে; -1।

— মার্ক

Answer 6

সিলেক্টের উপরে প্রদর্শিত স্প্যানের সাথে আমার একটি সমাধান রয়েছে যতক্ষণ না একটি নির্বাচন শেষ হয়। স্প্যানটি ডিফল্ট বার্তাটি প্রদর্শন করে এবং তাই এটি প্রস্তাবগুলির তালিকায় নেই:

এইচটিএমএল:

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

সিএসএস:

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

জাভাস্ক্রিপ্ট (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();
        }
    });
});

আমি ডেমোটির জন্য একটি জিসফিল তৈরি করেছি । ফায়ারফক্স এবং আইই 8 এর সাথে পরীক্ষিত।

Comments

ওএসএক্স-এ ক্রোম সর্বদা নির্বাচিত প্রথম বিকল্পটি দেখায়, তবে এটি ওএসএক্স নির্দিষ্ট বলে মনে হয়, কারণ এখানে প্রদত্ত সমস্ত সমাধান প্রথম দৃশ্যমান বিকল্পটি নির্বাচিত হওয়ার দিকে পরিচালিত করে।

— গামাদ্রিল

পরিবর্তে spanসেখানে ব্যবহার করুন legendএবং এটি নিখুঁত হবে বাlabel

— কার্লকো

এটি একটি আকর্ষণীয় পদ্ধতির এবং সাফারিটিতে কাজ করার জন্য আমি এই আচরণটি দেখতে পাবার একমাত্র সম্ভাব্য উপায়, তবে এটি এখানে খারাপভাবে প্রয়োগ করা হয়েছে; pointer-events: noneক্লিকগুলি নির্বাচন করার জন্য আপনাকে যেতে দেওয়ার জন্য আপনার কমপক্ষে আপনার স্প্যানের প্রয়োজন ।

— মার্ক

Answer 7

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

আপনি চাইলে অবশ্যই সিএসএস ফাইলটিতে সিএসএস স্থানান্তর করতে পারেন এবং escআবার অক্ষম নির্বাচন করতে বোতামটি ধরতে একটি স্ক্রিপ্ট রেখে পারেন। আমি যে অনুরূপ অন্যান্য উত্তর রেখেছি তার বিপরীতে value="", এটি তাই যদি আপনি কোনও ফর্মের সাথে আপনার নির্বাচিত তালিকার মান (গুলি) প্রেরণ করেন তবে এতে "নির্বাচিত কিছু" থাকবে না। Asp.net সালে MVC 5 কম্পাইল JSON হিসাবে পাঠানো var obj = { prop:$('#ddl').val(),...};এবং JSON.stringify(obj);ঠেকনা মান নাল হতে হবে।

Answer 8

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