<option> ট্যাগের ভিতরে href লিঙ্ক ব্যবহার করা

Question

আমার নিম্নলিখিত HTML কোড রয়েছে:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

আমি কীভাবে লিঙ্ক হিসাবে হোম , যোগাযোগ এবং সাইটম্যাপের মানগুলি তৈরি করতে পারি ? আমি নিম্নলিখিত কোডটি ব্যবহার করেছি এবং যেমনটি আমি আশা করেছিলাম এটি কার্যকর হয়নি:

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

Comments

আপনি কেবল helpfollowing লিংক অনুসরণ করতে পারেন stackoverflow.com/questions/12287672/... আশা করি যে মে সাহায্যের

— বিক্রম শ্রেষ্ঠা

হয়তো এই অ জাভাস্ক্রিপ্ট সমাধান সাহায্য করবে: stackoverflow.com/questions/9953482/...

— Melsi

Answer 1

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

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

আপডেট (মে 2020): কেউ কেন মন্তব্যে জিজ্ঞাসা করেছিলেন আমি কেন এই সমাধানটির পক্ষে থাকব না। আমার ধারণা এটি শব্দার্থবিজ্ঞানের প্রশ্ন a আমি বরং আমার ব্যবহারকারীরা ফর্ম নির্বাচনগুলি ব্যবহার করে নেভিগেট করে <a>রেখেছি <select>এবং এইচটিএমএল উপাদানগুলির সিমেটিক মিটিং রয়েছে এবং তাদের একটি উদ্দেশ্য রয়েছে, anchorsআপনাকে স্থান দিন, <select>তালিকা থেকে জিনিস বাছাই করার জন্য।

বিবেচনা করুন, যদি আপনি একটি অপ্রচলিত ব্রাউজার (কোনও গ্রাফিকাল ব্রাউজার বা স্ক্রিন রিডার বা পৃষ্ঠাটি প্রোগ্রামযুক্তভাবে অ্যাক্সেস করা হয়, বা জাভাস্ক্রিপ্ট অক্ষম করা আছে) দিয়ে কোনও পৃষ্ঠা দেখছেন তবে আপনার "অর্থ" বা "উদ্দেশ্য" এর অর্থ <select>কী? নেভিগেশন জন্য ব্যবহৃত? এটি "দয়া করে একটি পৃষ্ঠার নাম বাছাই করুন" বলছে এবং অন্য অনেক কিছু নয়, নেভিগেট করার বিষয়ে অবশ্যই কিছুই নেই। এটির পক্ষে সহজ প্রতিক্রিয়া হ'ল well i know that my users will be using IE or whatever so shrugতবে এই ধরণের অর্থপূর্ণ গুরুত্বের দিকটি বাদ যায়।

কিছু নিয়মিত অ্যাঙ্কর সমন্বিত উপযুক্ত লেআউট উপাদান (এবং কিছু জেএস) দিয়ে তৈরি একটি ফানকি ড্রপ-ডাউন ইউআই উপাদানটি এখনও লেআউট উপাদানটি হারিয়ে গেলেও এটির অভিপ্রায় ধরে রেখেছে, "এগুলি লিঙ্কগুলির একটি গুচ্ছ, একটি নির্বাচন করুন এবং আমরা সেখানে নেভিগেট করব" ।

এখানে অপব্যবহার এবং অপব্যবহার সম্পর্কিত<select> একটি নিবন্ধ দেওয়া আছে ।

Comments

কেবলমাত্র home.php, যোগাযোগ.php এবং সাইটম্যাপ.এফপিতে মানগুলি পরিবর্তন করুন।

— জেসন রোয়ে

খুব ঠান্ডা! আপনি এই কোডটি <option value="#anchor_on_my_site">...</option>একটি অ্যাঙ্কারের সাথে লিঙ্ক করতেও ব্যবহার করতে পারেন !

— prumet

আমি জানি এটি খুব তুচ্ছ তবে এটি "চালু" হওয়া উচিত এবং "ওয়ানচেঞ্জ" নয়

— অলিভার ডিকসন

আপনি এটি সংক্ষিপ্ত করতে পারেনlocation = this.value;

— জুয়ান মেন্ডেস

কেবল আপনাকে জানাতে আপনার লিঙ্কটি কোনও প্রয়োগের উপায়গুলির জন্য কার্যকারী নয়

— জন

Answer 2

আপনি বিকল্প ট্যাগ সহ href ট্যাগ ব্যবহার করতে পারবেন না। এটি করার জন্য আপনার জাভাস্ক্রিপ্টের প্রয়োজন হবে।

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>

Answer 3

পরিবর্তে একটি আসল ড্রপডাউন মেনু ব্যবহার করুন: একটি তালিকা ( ul, li) এবং লিঙ্কগুলি। লিঙ্ক হিসাবে ফর্ম উপাদানগুলির অপব্যবহার করবেন না।

পর্দার পাঠক সহ পাঠকরা সাধারণত স্বয়ংক্রিয়ভাবে উত্পাদিত লিঙ্কগুলির তালিকার মাধ্যমে স্ক্যান করে থাকেন - এই গুরুত্বপূর্ণ তথ্যগুলি মিস করবেন। অনেকগুলি কীবোর্ড নেভিগেশন সিস্টেমগুলি (যেমন জেডাব্লুএস, অপেরা) লিঙ্ক এবং ফর্ম উপাদানগুলির জন্য বিভিন্ন কীবোর্ড শর্টকাট সরবরাহ করে।

আপনি এখনও একটি হ্যান্ডলারটি কমপক্ষে selectব্যবহার করবেন না এর ধারণাটি বাদ দিতে না পারলে onchange। এটি কীবোর্ড ব্যবহারকারীদের জন্য একটি আসল ব্যথা এটি আপনার তৃতীয় আইটেমটিকে প্রায় অ্যাক্সেসযোগ্য করে তুলেছে।

Comments

টসচো অবশ্যই সঠিক, মাকমোর অ্যাপ্লিকেশনটি ফর্ম ক্ষেত্রগুলির একটি বিশাল অপব্যবহার।

— জিঞ্জারব্রেডবয়

ঠিক আছে, তবে মোবাইল ডিভাইসগুলির কী হবে? যদি স্বীকৃত উত্তরটি একটি "ডিসপ্লে: লুকানো" মিডিয়া ক্যোয়ারিতে স্যুইচ করা একটি আসল ড্রপডাউন মেনুর সাথে মিলিত হয়, তবে কি আপনার উদ্বেগগুলি এখনও বৈধ? বা আপনার আরও ভাল সমাধান আছে?

— স্কিপি লে গ্র্যান্ড গৌরূ

@ স্কিপাইলগ্র্যান্ডগৌরউ এর মধ্যে আসল লিঙ্কগুলির সাথে একটি মাত্র মেনু ব্যবহার করা সবচেয়ে ভাল সমাধান।

— ফুসিয়া

Answer 4

গৃহীত সমাধানটি দেখতে ভাল লাগছে, তবে একটি ক্ষেত্রে এটি পরিচালনা করতে পারে না:

যখন একই বিকল্পটি পুনরায় নির্বাচিত করা হয় তখন "অনচেঞ্জ" ইভেন্টটি ট্রিগার করা হবে না। সুতরাং, আমি নিম্নলিখিত উন্নতি নিয়ে এসেছি:

এইচটিএমএল

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery এর

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

Comments

বা কেবল শুরুতে একটি খালি বিকল্প যুক্ত করুন:<option value="">&nbsp;</option>

— কাই নোক

Answer 5

(টসচোর উত্তরে মন্তব্য করার মতো যথেষ্ট খ্যাতি আমার নেই))

স্ক্রিন পাঠকদের সাথে আমার কোনও অভিজ্ঞতা নেই এবং আমি নিশ্চিত যে আপনার পয়েন্টগুলি বৈধ।

যাইহোক, নির্বাচনগুলি পরিচালনা করতে কীবোর্ড ব্যবহার করার ক্ষেত্রে, কীবোর্ডটি ব্যবহার করে যে কোনও বিকল্প নির্বাচন করা তুচ্ছ:

ট্যাব নিয়ন্ত্রণ করতে

নির্বাচন তালিকা খুলতে স্পেস করুন

পছন্দসই তালিকা আইটেমটিতে স্ক্রোল করতে তীর আপ বা নীচে

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

কেবল ENTER এ চালু বা (JQuery। পরিবর্তন ()) ইভেন্টে আগুন লাগে।

যদিও আমি ব্যক্তিগতভাবে সাধারণ মেনুগুলির জন্য ফর্ম নিয়ন্ত্রণ ব্যবহার করব না, এমন অনেকগুলি ওয়েব অ্যাপ্লিকেশন রয়েছে যা পৃষ্ঠার উপস্থাপনা পরিবর্তন করতে ফর্ম নিয়ন্ত্রণ ব্যবহার করে (উদাহরণস্বরূপ, সাজানোর ক্রম) পৃষ্ঠা বা পুরানো বাস্তবায়নে নতুন পৃষ্ঠা লোডগুলি ট্রিগার করে যা মূলত একটি পৃষ্ঠা লিঙ্ক।

আইএমএইচও এটি ফর্ম নিয়ন্ত্রণের বৈধ ব্যবহার।

Answer 6

<select>ট্যাগটি ড্রপডাউন তালিকা তৈরি করে। আপনি একটি ড্রপডাউন এর মধ্যে এইচটিএমএল লিঙ্ক রাখতে পারবেন না।

তবে, জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা অনুরূপ কার্যকারিতা সরবরাহ করে। এখানে এক উদাহরণ রয়েছে: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Answer 7

    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে।

— rgmt

Answer 8

এই কোড ব্যবহার করে দেখুন

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>