JQuery ব্যবহার করে বিকল্পগুলি নির্বাচন করতে অতিরিক্ত ডেটা যুক্ত করা

Question

খুব সহজ প্রশ্ন আমি আশা করি।

আমার কাছে স্বাভাবিক <select>বাক্সটি আছে

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

আমি নির্বাচিত মান (ব্যবহার করে $("#select").val()) এবং নির্বাচিত আইটেমের প্রদর্শন মান ( ব্যবহার করে ) পেতে পারি $("#select :selected").text()।

তবে আমি কীভাবে <option>ট্যাগটিতে অতিরিক্ত মানের মতো সঞ্চয় করতে পারি ? আমি এর মতো কিছু করতে <option value="3.1" value2="3.2">other</option>এবং value2বৈশিষ্ট্যের মান পেতে সক্ষম হতে চাই (যা উদাহরণে 3.2 হবে)।

Comments

আপনি নির্বাচন বাক্সে একটি আইটেম যুক্ত করতে চান? অথবা আপনি একবারে একাধিক নির্বাচন করতে এবং ফলাফল পেতে সক্ষম হতে চান?

— zsalzbank

না আমি কেবল চাই যে <<<< ট্যাগে মান 2 = "" এর মতো হওয়া উচিত তবে এটি কার্যকর হয় না

— জিম স্মিথ

আপনার প্রশ্নটি পরিষ্কার নয় (আমার কাছে, কোনওভাবেই)। "নির্বাচিত বিকল্পগুলিতে অন্য মান সংরক্ষণ করুন" বলতে কী বোঝ? আপনি কি বোঝাতে চাইছেন যে আপনি নির্বাচনের ক্ষেত্রে একটি নতুন বিকল্প যুক্ত করতে চান, এটি যখন খোলার সাথে ব্যবহারকারীর কাছে উপস্থিত হবে?

— ফ্রোগজ

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

— ব্যবহারকারী 1783229

আপনি সর্বদা ডেটা-যেকোন কিছু ব্যবহার করে এবং .ডাটা ('কিছু') ব্যবহার করে যে কোনও সংখ্যক অতিরিক্ত পরামিতি যুক্ত করতে পারেন যেখানে আপনি অন্যথায় মূল্যায়ন করতে পারেন। মান 2 বা আপনার পছন্দ অনুসারে এর মতো কিছু

Answer 1

এইচটিএমএল মার্কআপ

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

কোড

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

এটি এখানে jQuery ব্যবহার করে একটি কাজের নমুনা হিসাবে দেখুন : http://jsfiddle.net/GsdCj/1/
এটিকে সরল জাভাস্ক্রিপ্ট ব্যবহার করে একটি কাজের নমুনা হিসাবে দেখুন: http://jsfiddle.net/GsdCj/2/

এইচটিএমএল 5 থেকে ডেটা অ্যাট্রিবিউট ব্যবহার করে আপনি উপাদানগুলিতে সিন্ট্যাক্টিক্যালি-বৈধ পদ্ধতিতে অতিরিক্ত ডেটা যুক্ত করতে পারেন যা jQuery থেকে সহজেই অ্যাক্সেসযোগ্য।

Comments

@ জিমস্মিথ হ্যাঁ, এটি হবে। (যদি আপনি এই উত্তরগুলির কোনওরূপে দরকারী মনে করেন তবে আপনার তাদের ভোট দেওয়া উচিত one যদি আপনি দেখতে পান যে এটি আপনার সমস্যার সেরা সমাধান করেছে তবে আপনার একটিকে "স্বীকৃত" হিসাবে

— চিহ্নিতও করা উচিত

কি? না এটা হবে না। এটি এমন সমস্ত ব্রাউজারগুলিতে কাজ করবে যা এইচটিএমএল 5 ডেটা অ্যাট্রিবিউটকে সমর্থন করে।

— গ্ল্যামড

@ithcy সমস্ত ব্রাউজারগুলি (এবং 10+ বছর ধরে) মার্কআপে "অবৈধ" বৈশিষ্ট্যগুলি সমর্থন করে এবং এটিকে ডিওএমের মাধ্যমে পেয়ে / নির্ধারণ করে। এইচটিএমএল 5 "ডেটা" বৈশিষ্ট্যগুলি হ'ল নামকরণের স্কিম এবং একটি নতুন স্ট্যান্ডার্ডের সাথে কেবল কাস্টম বৈশিষ্ট্য যা এগুলিকে আইনী হিসাবে ঘোষণা করে।

— ফ্রেগজ

@ ফ্রোগজ আমি এটি জানি। এটি ব্রাউজারগুলি অবৈধ বৈশিষ্ট্যগুলিকে "সমর্থন" করার বিষয় নয়, বরং এগুলি উপেক্ষা করার বিষয়। ব্যবহারযোগ্য ওয়েব ব্রাউজারটি লেখার সত্যিই অন্য কোনও উপায় নেই :) তবে আমি মনে করি এটি ডেটা অ্যাট্রিবিউটকে "সিনট্যাক্টিক্যালি বৈধ" বলতে একটি প্রসারিত - এটি আপনার প্রসঙ্গে নির্ভর করে। আপনার যদি এইচটিএমএল 5 ডক্টিপ থাকে তবে হ্যাঁ, সেগুলি বৈধ। অন্যথায় তারা না এবং ডাব্লু 3 সি বৈধতা ব্যর্থ করার কারণ হবে।

— গ্লোমাদ

@ithcy ব্রাউজারগুলি তাদের সাথে বিশেষভাবে কিছু না করার কারণে এগুলি তাদের 'উপেক্ষা' করে তবে তারা সম্পূর্ণরূপে উপলভ্য হওয়ায় তারা এগুলিকে অগ্রাহ্য করে নাgetAttribute() । আমি আপনার প্রাথমিক দাবিতে সাড়া দিচ্ছিলাম যে আমার উত্তরটি সমস্ত ব্রাউজারে কাজ করবে না। আমি আমার বিবৃতিতে দাঁড়িয়েছি যে এটি 'সমস্ত' ব্রাউজারগুলিতে কাজ করবে (এক্ষেত্রে 'সকলের একটি দুর্দান্ত উদার সংজ্ঞা জন্য)। আমাকে এমন একটি ব্রাউজার দেখান যা jQuery সমর্থন করে তবে এই ডেটা বৈশিষ্ট্যগুলির সাথে কাজ করে না - এমনকি একটি নন-এইচটিএমএল 5 ডক্টাইপ সহ - এবং আমি আমার শব্দগুলি খাব।

— ফ্রেগজ

Answer 2

আমার কাছে মনে হচ্ছে আপনি কোনও নতুন অ্যাট্রিবিউট তৈরি করতে চান? তুমি কি চাও

<option value="2" value2="somethingElse">...

এটি করতে, আপনি করতে পারেন

$(your selector).attr('value2', 'the value');

এবং তারপরে এটি পুনরুদ্ধার করতে, আপনি ব্যবহার করতে পারেন

$(your selector).attr('value2')

এটি বৈধ কোড হতে চলেছে না, তবে আমার ধারণা এটি কাজটি করে।

Comments

অন্য পদ্ধতিটি হ'ল $ (নির্বাচক) .ডাটা ('মান 2', "আপনার মান") এবং $ (নির্বাচক) .ডাটা ('মান 2') পুনরুদ্ধার করতে ... যা এখনও বৈধ।

— মাইকসইআর 87

ঠিক আছে, মূল মার্কআপে অ-মানক বৈশিষ্ট্যগুলি থাকা সিনথেটিকভাবে বৈধ হবে না, তবে ক) এনএস 4 এর দিনগুলির সাথে আমি কোনও ব্রাউজার দেখিনি, এবং খ) আপনি যদি ডিওএম সংশোধন করতে পারেন এমন কিছু উত্পাদন করতে যা "সিনট্যাকটিক্যালি অবৈধ", এটি কি সত্য?

— ফ্রোগজ

হ্যাঁ, এটি সত্যিই ... অবৈধ। যখন ডেটা- * বৈশিষ্ট্যগুলি এইচটিএমএল 5 স্ট্যান্ডার্ডে সংজ্ঞায়িত করা হয় তখন স্বেচ্ছাচারিত বৈশিষ্ট্য কেন ব্যবহার করবেন।

— স্টিফেনবায়ার

যেমন @ স্টেফেনবায়ার উল্লেখ করেছেন ... এখনই এটি করার সঠিক উপায়টি এইচটিএমএল 5 সমর্থিত ডেটা- * বৈশিষ্ট্যগুলি ব্যবহার করছে। মূলত ২০১০ সালে ফিরে যখন উত্তর দেওয়া হয়েছিল তখন এই বৈশিষ্ট্যগুলি সত্যই আশেপাশে / ভারী ব্যবহারের মধ্যে ছিল না :)

— মাইকসির ৮87

Answer 3

আপনার প্রশ্নটি যে হতে পারে তার থেকে আমি দুটি উদাহরণ তৈরি করেছি:

http://jsfiddle.net/grdn4/

অতিরিক্ত মান সংরক্ষণের জন্য এটি পরীক্ষা করে দেখুন। এটি অন্যান্য মান সংরক্ষণ করতে ডেটা অ্যাট্রিবিউট ব্যবহার করে:

http://jsfiddle.net/27qJP/1/

Answer 4

এইচটিএমএল / জেএসপি মার্কআপ:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

জ্যাকুয়েরি কোড: ইভেন্ট: পরিবর্তন

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

একটি লেবেল.ওয়াল () বা libelle.text () থাকতে পারে

Comments

<ফর্ম: অপশন ডেটা-লেবেল-কম্পেট = "$ {কমপেট.লিবেল} ডেটা-রেইসন =" $ {কমপেট.রেইন} "ডেটা-কমপেট =" $ te কমপেট.নুমেরো> "> <সি: আউট মান =" $ te compte.libelleCompte} MAD "/> </ form: বিকল্প>

— ফাদিদ

Answer 5

নির্বাচন বিকল্পে অন্য মান সংরক্ষণ করতে:

$("#select").append('<option value="4">another</option>')