ফাঁকা হিসাবে ডিফল্ট নির্বাচন বিকল্প

Question

আমার খুব অদ্ভুত প্রয়োজনীয়তা রয়েছে, যার মধ্যে আমার এইচটিএমএল-এর ড্রপ ডাউন মেনুতে ডিফল্টরূপে কোনও বিকল্প নির্বাচন করার প্রয়োজন নেই। যাহোক,

আমি এটি ব্যবহার করতে পারি না,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

কারণ, এর জন্য আমাকে প্রথম বিকল্পটি হ্যান্ডেল করার জন্য বৈধতা করতে হবে। নির্বাচিত ট্যাগের অংশ হিসাবে প্রথম বিকল্পটি অন্তর্ভুক্ত না করে কেউ এই লক্ষ্য অর্জনে আমাকে কীভাবে সহায়তা করতে পারে?

Comments

যতদূর আমি জানি এটি ফাঁকা লাইন পাওয়ার একমাত্র উপায়। আপনি যাচাই করতে হবে এর অর্থ কী? মান = "" বলার জন্য কেবল একটি চেক সেট করে মিথ্যা ফিরিয়ে দিন।

— রবার্ট

ড্রপডাউন না হয়ে রেডিও বোতাম ব্যবহার করার জন্য এটি একটি ভাল সুযোগ হবে।

— ব্লেজমোনজার

আমার মতে একেবারেই অদ্ভুত প্রয়োজন নয়। আমি একই নৌকায় আছি আমারও 'নো অপশন' ডিফল্ট দরকার। আমার বেশ কয়েকটি ড্রপ ডাউন রয়েছে যা ফর্ম জমা দেওয়ার প্রয়োজন নেই। এগুলিকে এ পদ্ধতিতে অক্ষম করা প্রাসঙ্গিক না হলে ব্যবহারকারীকে একটি নির্বাচন করা থেকে বাধা দেয়। ভাল প্রশ্ন! +1

— স্কট

নেই একটি অদ্ভুত প্রয়োজন, যদি নির্বাচন ছিল একটি প্রয়োজনীয় বৈশিষ্ট্য তারপর একটি স্থানধারক ট্যাগ বিকল্প না থাকার HTML5 এর একটি প্রয়োজন dev.w3.org/html5/spec-preview/...

— Testo Testini

আপনার যদি 3 বা 4 এর বেশি থাকে তবে @ ব্লাজমোনজার রেডিও বোতামগুলি একটি ভয়ংকর ধারণা 15 সেই অনেক ক্ষেত্রে তাদের নিজস্ব নকশা বিষয় আছে কিন্তু বিষয়টি এখনো দাঁড়িয়েছে যে রেডিও বোতাম ভাল স্কেল না এ সব ।

— টাইলার

Answer 1

সম্ভবত এটি সহায়ক হবে

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --ডিফল্ট হিসাবে প্রদর্শিত হবে। তবে আপনি যদি কোনও বিকল্প চয়ন করেন তবে আপনি এটি আবার নির্বাচন করতে পারবেন না।

খালি যুক্ত করেও আপনি এটি লুকিয়ে রাখতে পারেন option

<option style="display:none">

সুতরাং এটি আর তালিকায় প্রদর্শিত হবে না।

বিকল্প 2

আপনি যদি সিএসএস লিখতে না চান এবং উপরের সমাধানটির একই আচরণের প্রত্যাশা করেন তবে কেবল ব্যবহার করুন:

<option hidden disabled selected value> -- select an option -- </option>

Comments

উপরের একটি জেএসফিডাল এখানে দেওয়া হয়েছে , কারওর যদি এটির প্রয়োজন হয়।

— উয়ে কেইম

@ রাফায়াত_মোরি হিসাবে @azerafati উল্লেখ করেছেন যে আপনি "লুকানো" বৈশিষ্ট্যটি ব্যবহার করে এটি সংরক্ষণাগারভুক্ত করতে পারেন, সুতরাং কোনও সিএসএসের প্রয়োজন নেই। খাঁটি এইচটিএমএল 5;)<option hidden disabled selected value> -- select an option -- </option>

— ব্রেইনওভারফ্লো

আমি যদি এটি আবার নির্বাচন করতে সক্ষম হতে চাই? আমি এটি কিছু পাঠাতে চাই না। এটা কি সম্ভব?

— মাইকেল রজার্স

বিকল্প উপাদানটিতে একটি লুকানো গুণাবলী যুক্ত করা আমার জন্য যাদু করেছে! এটি এত সহজ হবে বলে আশা করেনি। ধন্যবাদ

— এস ডোমেং

সচেতন হতে হবে, উভয় গোপন বৈশিষ্ট্য ও ডিসপ্লে শৈলী আই ই কাজ করে না, এমনকি 11. stackoverflow.com/questions/58862242/...

— yatskovsky

Answer 2

এটি অর্জনের জন্য আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। নিম্নলিখিত কোড ব্যবহার করে দেখুন:

এইচটিএমএল

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select> 

জাতীয়

document.getElementById("myDropdown").selectedIndex = -1;

বা জিকুয়েরি

$("#myDropdown").prop("selectedIndex", -1);

Comments

এই সমাধানটি ক্রোম 35 এর সাথে আংশিকভাবে কাজ করে: বিকল্পের তালিকাটি অদৃশ্য হলে ড্রপডাউন কোনও নির্বাচন দেখায় না, তবে বিকল্পগুলির তালিকা দৃশ্যমান হয়ে গেলে নির্বাচিত প্রথম বিকল্পটি দেখায়। সাফারি 7 যদিও ইচ্ছাকৃত আচরণ করে।

— ফ্লচটিলিলোক

মজার বিষয় হ'ল এটি এইচটিএমএল ফর্মের বৈধতা সহ কাজ করে। আপনি যদি উপাদানটিতে requiredবৈশিষ্ট্যটি ব্যবহার করেন selectএবং কোনও বিকল্প নির্বাচন না করে জমা দেন তবে ফর্মের বৈধতা ব্যর্থ হবে এবং আপনাকে বলবে, আপনাকে একটি নির্বাচন করতে হবে। অতএব আমি সত্যিই এই পদ্ধতির পছন্দ। (কমপক্ষে ক্রোমে পরীক্ষিত)

— আন্দ্রে লিনার্ট

কাজ করে না (কমপক্ষে বর্তমান ব্রাউজারগুলিতে এই লেখা হিসাবে - এবং অকারণে জাভাস্ক্রিপ্টের উপর নির্ভর করে

— সাইলেন্টমাউথ

2019 হিসাবে, কেবল সাফারি আইওএস 10

— এটির

Answer 3

আজ (2015-02-25)

এটি বৈধ এইচটিএমএল 5 এবং সার্ভারে একটি ফাঁকা (কোনও স্থান নয়) প্রেরণ করে:

<option label=" "></option>

Http://)ator.w3.org/check এ বৈধতা যাচাই করা হয়েছে

উইন 7 (আইই 11 আইই 10 আই 9 আইইএফ এফ 3535 সাফারি 5.1) উবুন্টু 14.10 (ক্রোম 40, এফএফ 35) ওএসএক্স_ইসোমাইট (সাফারি 8, ক্রোম 40) অ্যান্ড্রয়েড (স্যামসং-গ্যালাক্সি-এস 5) এর সাথে যাচাই করা আচরণ

নিম্নলিখিত এছাড়াও আজ বৈধতা পাস করে , তবে বেশিরভাগ ব্রাউজারের সার্ভার (সম্ভবত কাঙ্ক্ষিত নয়) এবং অন্যকে একটি ফাঁকা (Chrome40 / লিনাক্স একটি ফাঁকা পাস করে) থেকে কিছু ধরণের স্থান অক্ষরও পাস করে:

<option>&#160;</option>

পূর্বে (2013-08-02)

আমার নোট অনুসারে, উপরে প্রদর্শিত বিকল্প ট্যাগগুলির অভ্যন্তরে অ-ব্রেকিং-স্পেস সত্তা 2013 সালে নিম্নলিখিত ত্রুটিটি তৈরি করেছিল:

ত্রুটি: ডাব্লু 3 সি মার্কআপ ভ্যালিডাটন সার্ভিস (সর্বজনীন): প্রয়োজনীয় বৈশিষ্ট্যযুক্ত এবং একাধিক বৈশিষ্ট্য ছাড়াই একটি নির্বাচিত উপাদানটির প্রথম শিশু বিকল্প উপাদান, এবং যার আকার 1, অবশ্যই খালি মান বৈশিষ্ট্যযুক্ত থাকতে হবে, বা কোনও পাঠ্য সামগ্রী থাকতে হবে না।

সেই সময়, একটি নিয়মিত স্থান বৈধ এক্সএইচটিএমএল 4 ছিল এবং প্রতিটি ব্রাউজার থেকে সার্ভারে একটি ফাঁকা (কোনও স্থান নয়) প্রেরণ করে:

<option> </option>

ভবিষ্যৎ

স্পষ্টভাবে একটি ফাঁকা বিকল্পের অনুমতি দেওয়ার জন্য যদি অনুমানটি আপডেট করা হয় তবে এটি আমার হৃদয়কে আনন্দিত করবে। সাধারণত সংক্ষিপ্ত বাক্য গঠন ব্যবহার করে। নিম্নলিখিতগুলির যে কোনও একটি দুর্দান্ত হবে:

<option />
<option></option>

পরীক্ষা ফাইল

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

Answer 4

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

আপনি ড্রপডাউন তালিকায় লুকিয়ে রাখতে চান এমন বিকল্পটিতে কেবল "লুকানো" রাখুন।

Answer 5

সমাধান যা কেবল সিএসএস ব্যবহার করে কাজ করে:

উত্তর: ইনলাইন সিএসএস

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

বি: সিএসএস স্টাইল শীট

আপনার যদি হাতে একটি সিএসএস ফাইল থাকে তবে আপনি প্রথমটি optionব্যবহার করে লক্ষ্য করতে পারেন :

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Answer 6

এটির সাহায্য করা উচিত:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

Comments

এটি প্রয়োজনীয়তা অর্জনের জন্য এটি সর্বাধিক আধুনিক (এইচটিএমএল 5) উপায়, সচেতন হন এটির জন্য একটি টাইপ = জমা দিন বোতামটি প্রয়োজন। অনক্লিক সাবমিট হ্যান্ডলার সহ একটি টাইপ = বাটন ব্যবহারকারীকে স্বয়ংক্রিয়ভাবে নির্বাচন করার প্রয়োজন হয় না।

— আরজান

Answer 7

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

আপনি এক্ষেত্রে কাস্টম বৈধতা এড়াতে পারেন।

Answer 8

শুধু একটি ছোট মন্তব্য:

কিছু সাফারি ব্রাউজারগুলি "লুকানো" বৈশিষ্ট্য বা শৈলী সেটিং "প্রদর্শন: কিছুই নয়" (MacOS 10.12.6 এর অধীনে সাফারি 12.1 এর সাথে পরীক্ষিত) সম্মান করে না বলে মনে হয়। সুস্পষ্ট স্থানধারক পাঠ্য ব্যতীত, এই ব্রাউজারগুলি বিকল্পগুলির তালিকায় খালি প্রথম লাইনটি দেখায়। সুতরাং এই "ডামি" এন্ট্রিটির জন্য সর্বদা কিছু ব্যাখ্যামূলক পাঠ সরবরাহ করা কার্যকর হতে পারে:

<option hidden disabled selected value>(select an option)</option>

"অক্ষম" বৈশিষ্ট্যের জন্য ধন্যবাদ, এটি যাইহোক সক্রিয়ভাবে নির্বাচিত হবে না।

Answer 9

আপনি যা করতে চাইছেন তা আমি বুঝতে পেরেছি best সর্বোত্তম এবং সবচেয়ে সফল উপায় হ'ল:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

Answer 10

আমি এটি সত্যই আকর্ষণীয় বলে মনে করেছি কারণ এতদিন আগে আমি একই জিনিসটি অনুভব করেছি। যাইহোক, আমি এই সম্পর্কিত সমাধান সম্পর্কে ইন্টারনেটে একটি উদাহরণ পেয়েছি।

আরও কোনও বিজ্ঞাপন ছাড়াই নীচে কোড টুকরাটি দেখুন:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

এটির সাথে এটি যে কোনও সময় জমা দেওয়া যাবে না তবে নির্বাচনযোগ্য হবে। ইউজার ইন্টারফেসের জন্য আরও সুবিধাজনক এবং ব্যবহারকারীর অভিজ্ঞতার জন্য দুর্দান্ত।

ঠিক আছে, আমি আশা করি এটি সাহায্য করবে। চিয়ার্স!

Comments

এটিকে জমা দিতে অক্ষম হয়ে যাওয়া এমনকি ড্রপডাউনের প্রতি ব্যবহারকারীর দৃষ্টি আকর্ষণ করা অপ্রয়োজনীয় মনে হলেও আমার এই পরামর্শটি পছন্দ হয়েছে

— আইওফ্যাকচার

@ লোফ্যাকচার: ইনপুটটির জন্য ধন্যবাদ। প্রকৃতপক্ষে, আমি যে কোডটি লিখেছিলাম তা হ'ল আমি

— চাইছিলাম

Answer 11

কোনও HTML সমাধান নেই। এইচটিএমএল 4.0.০১ স্পেস অনুসারে, optionউপাদানগুলির কোনওটিরই বৈশিষ্ট্য না থাকলে ব্রাউজারের আচরণটি অপরিজ্ঞাত হয় selectedএবং ব্রাউজারগুলি অনুশীলনে যা করে তা হ'ল তারা প্রথম বিকল্পটি প্রাক-নির্বাচিত করে।

কার্যকারণ হিসাবে, আপনি উপাদানগুলির selectএকটি সেট দ্বারা input type=radioএকই উপাদানটি প্রতিস্থাপন করতে পারেন (একই nameবৈশিষ্ট্য সহ)। এটি বিভিন্ন চেহারা এবং ব্যবহারকারী ইন্টারফেস সহ একই ধরণের একটি নিয়ন্ত্রণ তৈরি করে। যদি input type=radioউপাদানের checkedকোনওটির বৈশিষ্ট্য না থাকে তবে প্রাথমিকভাবে বেশিরভাগ আধুনিক ব্রাউজারগুলিতে তাদের কোনওটিই নির্বাচিত হয় না।

Answer 12

আমি লারাভেল 5 ফ্রেমওয়ার্ক ব্যবহার করছি এবং @ গাম্বির উত্তর আমার পক্ষেও কাজ করেছে তবে আমার প্রকল্পের জন্য কিছু পরিবর্তন নিয়েছে।

আমার কাছে একটি ডাটাবেস টেবিলের বিকল্প মান রয়েছে এবং আমি সেগুলি একটি পূর্ববর্তী বিবৃতি দিয়ে ব্যবহার করি। তবে বিবৃতি দেওয়ার আগে আমি @ গাম্বিতের প্রস্তাবিত সেটিংস সহ একটি বিকল্প যুক্ত করেছি এবং এটি কার্যকর হয়েছে।

এখানে আমার উদাহরণ:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset 

আমি আশা করি এটিও কাউকে সহায়তা করে। ভাল কাজগুলো করতে থাকো!

Answer 13

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

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

ড্রপ ডাউনের প্রথম বিকল্পটি ফাঁকা হবে।

Answer 14

দেখানোর জন্য দয়া করে ড্রপ ডাউনতে একটি মান নির্বাচন করুন এবং কিছু মান নির্বাচন করার পরে এটি লুকান। দয়া করে নীচের কোডটি ব্যবহার করুন।

এটি প্রয়োজনীয় বৈধতাও সমর্থন করবে।

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Answer 15

আপনি যদি কৌনিক (2+), (বা অন্য কোনও কাঠামো) ব্যবহার করেন তবে আপনি কিছু যুক্তি যুক্ত করতে পারেন। যুক্তিটি হ'ল: যদি ব্যবহারকারী এখনও অন্য কোনওটি নির্বাচন না করে তবে একটি খালি বিকল্প প্রদর্শন করুন। সুতরাং ব্যবহারকারী কোনও বিকল্প নির্বাচন করার পরে, খালি বিকল্পটি অদৃশ্য হয়ে যায়।

কৌণিক (9) এর জন্য এটি দেখতে এরকম কিছু হবে:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

Answer 16

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

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

এইচটিএমএল 5 এ বৈধতা দেয়। requiredনির্বাচিত উপাদানগুলিতে বৈশিষ্ট্য সহ কাজ করে । পুনরায় নির্বাচিত হতে পারে। গুগল ক্রোম 45, ইন্টারনেট এক্সপ্লোরার 11, এজ, ফায়ারফক্স 41 এ কাজ করে।