ড্রপডাউন তালিকার ফাঁকা আইটেম ছাড়াই ফাঁকা এইচটিএমএল নির্বাচন করুন

110

সাবজ কিভাবে বাস্তবায়ন করবেন?

আমি যখন লিখি:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

তারপরে ডিফল্ট নির্বাচিত আইটেমটি "আআআআএ" হয়

আমি যখন লিখি:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

তারপরে ডিফল্ট নির্বাচিত আইটেমটি ফাঁকা, তবে এই ফাঁকা আইটেমটি ড্রপ ডাউনতে উপস্থাপন করে।

আমি কীভাবে ড্রপডাউন তালিকায় গোপন থাকা ডিফল্ট ফাঁকা মানের সাথে নির্বাচিত ট্যাগটি প্রয়োগ করতে পারি?

html select drop-down-menu

— নিক স্ট্যাভ্রোগিন
সূত্র

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

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

182

কেবল অক্ষম এবং / অথবা লুকানো বৈশিষ্ট্যগুলি ব্যবহার করুন:

<option selected disabled hidden style='display: none' value=''></option>

selected এই বিকল্পটি ডিফল্ট করে তোলে।
disabled এই বিকল্পটি সঙ্কোচনীয় করে তোলে।
style='display: none'পুরানো ব্রাউজারগুলিতে এই বিকল্পটি প্রদর্শিত হবে না। দেখুন: আমি কি গোপন বৈশিষ্ট্যের জন্য ডকুমেন্টেশন ব্যবহার করতে পারি ?
hidden এই বিকল্পটি ড্রপ-ডাউন তালিকায় প্রদর্শিত হবে না makes

— এদুয়ার্দো
সূত্র

3

আসলে আইই 11 "লুকানো" বিকল্পটি প্রদর্শন করে।

— এডওয়ার্ড ওলামিসান

6

ওয়েবকিট 'লুকানো' বৈশিষ্ট্যটিকে সমর্থন করে বলে মনে হচ্ছে না

— ইথান রিসর

2

আমি যেভাবে ব্যবহার করতে পারি তাতে উল্লিখিত হয়েছে , hiddenবৈশিষ্ট্যটি কার্যকরভাবে কার্যকর display: none, তাই পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য:<option selected disabled hidden style='display: none' value=''></option>

— নেটা

66

আপনি ব্যবহার করে সেট selectedIndexকরতে পারেন : http://jsfiddle.net/R9auG/ ।-1.prop

পুরানো jQuery সংস্করণগুলির .attrপরিবর্তে .prop: http://jsfiddle.net/R9auG/71/ ব্যবহার করুন ।

— pimvdb
সূত্র

@ ইরোনমফিন: ধন্যবাদ; কেবল পরীক্ষিত হয়েছে এবং বাস্তবে সমস্ত মূলধারার ব্রাউজারগুলিতে কাজ করছে বলে মনে হচ্ছে।

— pimvdb

@ জোবিডাফ্লাই: সম্পাদনার জন্য ধন্যবাদ; আমি একটু বিস্তৃত করেছি।

— pimvdb

1

.attrনতুন jQuery সংস্করণে ব্যর্থ হবে। স্মার্ট হওয়ার চেষ্টা আমাকে ব্যর্থ করে দিয়েছে।

— কারসন ইপ

33

সহজভাবে ব্যবহার

<option value="" selected disabled>Please select an option...</option>

স্ক্রিপ্ট ছাড়াই যে কোনও জায়গায় কাজ করবে এবং আপনাকে একই সাথে ব্যবহারকারীকে নির্দেশ দেওয়ার অনুমতি দেবে।

— mvreijn
সূত্র

25

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

— আন্দ্রে আর
সূত্র

1

এফএফ / ক্রোম - ঠিক আছে, অপেরা / ie7-9 - ঠিক আছে না আপনি এখানে এটি পরীক্ষা করতে পারেন ( জেএসের সাথে বা ছাড়াই): jsfiddle.net/R9auG/145 সুতরাং আমি @pimvdb দ্বারা জেএস-পদ্ধতির প্রস্তাব দিচ্ছি

— টিবাল্ট

11

এখানে সরল জাভাস্ক্রিপ্ট ব্যবহার করে এটি করার একটি সহজ উপায়। এটি পিমভডিবি পোস্ট করা jQuery স্ক্রিপ্টের ভ্যানিলা সমতুল্য। আপনি এটি এখানে পরীক্ষা করতে পারেন ।

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

।

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

ফর্ম এবং জাভাস্ক্রিপ্টে "id_here" মেলে কিনা তা নিশ্চিত করুন।

— মিংওয়ে স্যামুয়েল
সূত্র

3

আপনি পারবেন না। তারা কেবল সেভাবে কাজ করে না। একটি ড্রপ ডাউন মেনুতে অবশ্যই এর যে কোনও একটি বিকল্প নির্বাচন করা উচিত।

আপনি (যদিও আমি এটি প্রস্তাব দিচ্ছি না) কোনও পরিবর্তন ইভেন্টের জন্য নজর রাখতে পারেন এবং তারপরে শূন্য থাকলে প্রথম বিকল্পটি মুছতে জেএস ব্যবহার করুন।

— কোয়েন্টিন
সূত্র

3

আপনি এই আচরণের প্রস্তাব দিচ্ছেন না কেন?

— জোশ নয়ে

এমন প্রচুর কেস রয়েছে যেখানে আপনি ব্যবহারকারী তালিকা থেকে সক্রিয়ভাবে কিছু বাছাই করতে চান। আমি মনে করি না জেএস এটি করার সর্বাধিক অনুকূল উপায় (যদিও এটি একমাত্র উপায় বলে মনে হচ্ছে) তবে আমি সত্যিই মনে করি একটি উপায় থাকা উচিত ।

— কিওয়ার্টি

2

বিশুদ্ধরূপে এইচটিএমএল এর জন্য @ গিরিখাত একটি দুর্দান্ত সমাধান আছে। JQuery এর জন্য আপনার সিলেক্ট ড্রপ ডাউন আইডি দিন এবং তারপরে jQuery দিয়ে নির্বাচন করুন:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form>

তারপরে পৃষ্ঠা লোডের ড্রপ ডাউন সাফ করতে এই jQuery ব্যবহার করুন:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

বা এটিকে নিজেই কোনও ফাংশনের ভিতরে রেখে দিন:

$('#myDropDown').val('');

আপনি যা সন্ধান করছেন তা সম্পাদন করে এবং আপনার পৃষ্ঠাটি পুনরায় লোড না করে ড্রপ ডাউন খালি করতে হলে আপনার পৃষ্ঠায় কল পেতে পারে এমন ফাংশনে এটি রাখা সহজ।

— জেসন স্লোবটস্কি
সূত্র

0

আপনি এই স্নিপেট চেষ্টা করতে পারেন

$("#your-id")[0].selectedIndex = -1

এটা আমার জন্য কাজ করে।

— Shenbag
সূত্র

1

একটি পরিষ্কার ব্যাখ্যা প্রদানের জন্য উত্তরটির সাথে একটি jsfiddle.net সরবরাহ করা ভাল ।

— বেনামে

1

এটি ধরে নেয় যে ওপি jQuery ব্যবহার করছে।

— evanrmurphy