নির্বাচন পরিবর্তনের সময়, ডেটা অ্যাট্রিবিউট মানটি পান

Question

নিম্নলিখিত কোডটি 'অপরিবর্তিত' দেয় ...

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

Comments

Ind (এটি) .ফাইন্ড (': নির্বাচিত') বা $ (এটি)। শিশুরা ('বিকল্প: নির্বাচিত') ব্যবহার করা কি ভাল?

— ইউজারবিজি

এই প্রশ্নটি দেখুন: stackoverflow.com/questions/648004/…

— জর্ডান ব্রাউন

Answer 1

আপনার নির্বাচিত বিকল্পটি খুঁজে বের করতে হবে:

$(this).find(':selected').data('id')

অথবা

$(this).find(':selected').attr('data-id')

যদিও প্রথম পদ্ধতিটি পছন্দ করা হয়।

Comments

আমি ভুলভাবে আমার ইনটেনিট পোস্টে অ্যাটর () ব্যবহার করেছি, আমার অর্থ ডেটা () তবে এটি আমার জন্য 'অপরিজ্ঞাত' ফিরিয়ে দেয়।

— ইউজারবিজি

আমি কেবল এটি পেরিয়ে এসেছি এবং আমি ভাবছি যে পারফরম্যান্স কারণে, বা অন্য কোনও কারণে প্রথম পদ্ধতিটি পছন্দ করা হয়? @JordanBrown

— Clarkey

@ ক্লার্কি আমার অনুমান যে ডেটা () অ্যাট্রির () এর চেয়ে দ্রুততর কারণ এট্রি () কে এটি কী ধরণের বৈশিষ্ট্য তা বোঝার জন্য অতিরিক্ত কাজ করতে হবে। শুধু একটি অনুমান।

— dev_willis

Answer 2

নিম্নলিখিত চেষ্টা করুন:

$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});

আপনার পরিবর্তন গ্রাহক নির্বাচনের পরিবর্তিত ইভেন্টের সদস্যতা নিয়েছেন, সুতরাং thisপরামিতিটি নির্বাচিত উপাদান। ডেটা-আইডি থেকে আপনার বাছাই করা বাচ্চাকে খুঁজে বের করতে হবে।

Comments

2016 এর মতো find()অনেক চেয়ে দ্রুত children()এমনকি এই এক যেখানে আমরা শুধু 2. একটি গাছ গভীরতা আছে মত ক্ষেত্রে

— Hafenkranich

Answer 3

document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};

Comments

স্ট্যাকওভারফ্লোতে দয়া করে আপনার পোস্ট কোড ব্লককে ব্যাখ্যা এবং / অথবা রেফারেন্সগুলি সহ (এমনকি সমাধানটি সহজ / "স্ব-ব্যাখ্যামূলক" হলেও) সমর্থন করার চেষ্টা করুন কারণ প্রত্যেকে কোনও নির্দিষ্ট ভাষার বাক্য গঠন / আচরণ / পারফরম্যান্সের সাথে পরিচিত নয়।

— মিকম্যাকুসা

Answer 4

ভ্যানিলা জাভাস্ক্রিপ্ট:

this.querySelector(':checked').getAttribute('data-id')

Comments

স্ট্যাকওভারফ্লোতে দয়া করে আপনার পোস্ট কোড ব্লককে ব্যাখ্যা এবং / অথবা রেফারেন্সগুলি সহ (এমনকি সমাধানটি সহজ / "স্ব-ব্যাখ্যামূলক" হলেও) সমর্থন করার চেষ্টা করুন কারণ প্রত্যেকে কোনও নির্দিষ্ট ভাষার বাক্য গঠন / আচরণ / পারফরম্যান্সের সাথে পরিচিত নয়।

— মিকম্যাকুসা

Answer 5

আপনি ব্যবহার করতে পারেন contextসঙ্গে সিনট্যাক্স thisবা $(this)। এটি একই প্রভাব হিসাবে find()।

$('select').change(function() {
    console.log('Clicked option value => ' + $(this).val());
    <!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
    <!-- error console.log('this without explicit :select => ' + this.data('id')); -->
    console.log(':select & $(this) =>    ' + $(':selected', $(this)).data('id'));
    console.log(':select & this =>       ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
    console.log('$(this) & find =>       ' + $(this).find(':selected').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

মাইক্রোপটিমাইজেশনের বিষয়টি হিসাবে, আপনি এটি বেছে নিতে পারেন find()। আপনি যদি কোনও কোড গল্ফার বেশি হন তবে প্রসঙ্গের বাক্য গঠনটি আরও সংক্ষিপ্ত। এটি মূলত কোডিং স্টাইলে নেমে আসে।

এখানে একটি প্রাসঙ্গিক পারফরম্যান্স তুলনা করা হয় ।

Answer 6

$('#foo option:selected').data('id');

Comments

স্ট্যাকওভারফ্লোতে দয়া করে আপনার পোস্ট কোড ব্লককে ব্যাখ্যা এবং / অথবা রেফারেন্সগুলি সহ (এমনকি সমাধানটি সহজ / "স্ব-ব্যাখ্যামূলক" হলেও) সমর্থন করার চেষ্টা করুন কারণ প্রত্যেকে কোনও নির্দিষ্ট ভাষার বাক্য গঠন / আচরণ / পারফরম্যান্সের সাথে পরিচিত নয়।

— মিকম্যাকুসা

ওপিতে idনির্বাচিত উপাদানগুলিতে কোনও বৈশিষ্ট্য নেই (এবং এর ইউটিলিটির কারণে এটির প্রয়োজন নেই this)।

— মিকম্যাকুসা

Answer 7

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

<select class="form-control" id="foo">
    <option value="first" data-id="1">first</option>
    <option value="second" data-id="2">second</option>
</select>

এবং স্ক্রিপ্ট

$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});

Comments

স্ট্যাকওভারফ্লোতে দয়া করে আপনার পোস্ট কোড ব্লককে ব্যাখ্যা এবং / অথবা রেফারেন্সগুলি সহ (এমনকি সমাধানটি সহজ / "স্ব-ব্যাখ্যামূলক" হলেও) সমর্থন করার চেষ্টা করুন কারণ প্রত্যেকে কোনও নির্দিষ্ট ভাষার বাক্য গঠন / আচরণ / পারফরম্যান্সের সাথে পরিচিত নয়।

— মিকম্যাকুসা