বুটস্ট্র্যাপ বোতাম ড্রপডাউন শিরোনামে নির্বাচিত আইটেমটি কীভাবে প্রদর্শিত হবে

Question

আমি আমার অ্যাপ্লিকেশনটিতে বুটস্ট্র্যাপ ড্রপডাউন উপাদানটি ব্যবহার করছি:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

আমি নির্বাচিত আইটেমটি বিটিএন লেবেল হিসাবে প্রদর্শন করতে চাই। অন্য কথায়, নির্বাচিত তালিকা আইটেমটির সাথে "দয়া করে তালিকা থেকে নির্বাচন করুন" প্রতিস্থাপন করুন ("আইটেম আই", "আইটেম II", "আইটেম III")।

Answer 1

যতদূর আমি আপনার সমস্যাটি বুঝতে পেরেছি তা হল আপনি ক্লিক লিঙ্কযুক্ত পাঠ্যের সাহায্যে বোতামের পাঠ্যটি পরিবর্তন করতে চান, যদি আপনি এটি চেষ্টা করতে পারেন: http://jsbin.com/owuyix/4/edit

 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

---

আপনার মন্তব্য অনুযায়ী:

আমার কাছে <li>এজ্যাক্স কলের মাধ্যমে তালিকাযুক্ত আইটেমটি থাকা অবস্থায় এটি আমার পক্ষে কাজ করে না ।

সুতরাং আপনাকে .on()jQuery পদ্ধতিতে ইভেন্টটি নিকটতম স্থিতিশীল পিতামাতার কাছে অর্পণ করতে হবে :

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

এখানে ইভেন্টটি স্থির পিতামাতার কাছে অর্পণ করা হয় $(".dropdown-menu"), যদিও আপনি ইভেন্টটিকে $(document)খুব বেশি প্রতিনিধিত্ব করতে পারেন কারণ এটি সর্বদা উপলব্ধ।

Comments

হাই জাই আমি আপনার নমুনা লিঙ্কটি চেষ্টা করেছি কিন্তু এটি সেখানে কাজ করছে না, পাশাপাশি নির্বাচিত মানটি ধরে নেওয়ার পাশাপাশি পরে ডাটাবেসে পোস্ট করতে হবে

— সুফি

@ বেহেসিনি আপনি দয়া করে পরিষ্কার করতে পারেন "নির্বাচিত মানটি পাশাপাশি ডাটাবেসে পোস্ট করতে" কোন মানটি?

— জয়

আপনি ডিবিতে পোস্ট করতে চাইলে বর্তমান ক্লিক করা আইটেমের মানটি উত্তর আপডেট করেছি।

— জয়

হাই বেহেসিনি, এটি "$ (ফাংশন () {});" "$ (দস্তাবেজ) এর সমতুল্য। প্রস্তুত (ফাংশন () {});" আপনি এখানে আরও তথ্য পেতে পারেন: api.jquery.com/ تيار

— জয়

এটি কি একটু হকি মনে হচ্ছে না যে এটিই এর সমাধান?

— ক্রিস্টিন

Answer 2

বুটস্ট্র্যাপ 3.3.4 এর জন্য আপডেট হয়েছে:

এটি আপনাকে প্রতিটি উপাদানের জন্য পৃথক ডিসপ্লে পাঠ্য এবং ডেটা মান রাখতে দেয়। এটি নির্বাচনের ক্ষেত্রে ক্যারেটকেও অবিচ্ছিন্ন করবে।

জাতীয়:

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

এইচটিএমএল:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

জেএস ফিডল উদাহরণ

Comments

দুর্দান্ত কাজ করে এবং নির্বাচনের পরে ড্রপ-ডাউন আইটেমগুলি "to (এটি) .পরিবর্তন ("। বিটিএন-গ্রুপ ") লুকানোর জন্য কেবল নীচের হিসাবে এগুলি যুক্ত করেছি find ('। নির্বাচন') পাঠ্য ($ (এটি) । টেক্সট ())। শেষ ()। শিশুরা ('.ড্রপডাউন-টগল') .ড্রপডাউন ('টগল'); "

— সেন্থিল

বুটস্ট্র্যাপ ৩.৩.৪ এর জন্য আপডেট: পিতামাতাদের ("ইনপুট-গ্রুপ-বিটিএন") পিতামাতার ("। ড্রপডাউন") এর সাথে প্রতিস্থাপন করা দরকার

— সিনকপ্লাগ

@ সিনপ্লাগ দ্বারা প্রস্তাবিত পরিবর্তন যুক্ত হওয়ার পরে এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আরও, আপনি যদি বোতামটির পাঠ্যে ডাউন ক্যারেট বজায় রাখতে চান তবে আপনাকে .text এর পরিবর্তে .html ব্যবহার করতে হবে এবং স্প্যানটি এতে যুক্ত করতে হবে $(this).text()।

— ম্যাটডি

@ ম্যাটডি, আমি আশা করি গ্রহণযোগ্য উত্তর সম্পর্কে মন্তব্য করার আগে আমি আপনার মন্তব্যটি দেখেছি - আপনি স্পট করছি।

— পল

আমি $(this).parents(".dropdown").find('.btn')jquery DOM দু'বার অতিক্রম করার পরিবর্তে কোনও চলকটিতে সঞ্চয় করার পরামর্শ দিচ্ছি ।

— অ্যাডাম

Answer 3

বুটস্ট্র্যাপ 3 এর সাথে কাজ করে এমন একটি সুন্দর ভাল উপস্থাপনা সহ আপনার একাধিক বোতাম ড্রপডাউন হওয়ার ক্ষেত্রে আমি জয়ের উত্তরকে সামান্য উন্নতি করতে সক্ষম হয়েছি:

বাটন জন্য কোড

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Option: <span class="selection">Option 1</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

জিকুয়েরি স্নিপেট

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

আমি "নির্বাচন" শ্রেণিতে 5px মার্জিন-রাইটও যুক্ত করেছি।

Answer 4

এই একক jQuery ফাংশন আপনার প্রয়োজনীয় সমস্ত করবে।

$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});

Comments

ধন্যবাদ! এই উত্তরটি আমার সমস্ত 10 মিনিট পড়ার পরে 10 মিনিট সময় নষ্ট করার পরে আমাকে বাঁচায়।

— আইজুদ্দিন বদ্রি

Answer 5

এখানে এটির আমার সংস্করণ যা আমি আশা করি আপনার কিছু সময় সাশ্রয় করতে পারে :)

jQuery অংশ:

$(".dropdown-menu").on('click', 'li a', function(){
  var selText = $(this).children("h4").html();


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

এইচটিএমএল অংশ:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Comments

আপনি কীভাবে ড্রপডাউনটিতে পাঠ্যটিকে কীভাবে ব্যবহার করেন যা ব্যবহারকারী সবেমাত্র নির্বাচন করেছেন? বলুন যে তারা বিকল্প 1 টি নির্বাচন করেছে, তারপরে ক্লিক করা বন্ধ। বিকল্পের জন্য পাঠ্যটি এই পর্যায়ে ড্রপডাউনটিতে হওয়া উচিত, আপনি কীভাবে এটি করেন?

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

যখন কোনও ব্যবহারকারী "বিকল্প সেল্টেক্সট = $ (এটি)। শিশুরা (" এইচ 4 ") বিকল্প নির্বাচন করেন। এইচটিএমএল ()" পাঠ্য পরিবর্তন করুন।

— ওসকার

Answer 6

এটি একই পৃষ্ঠায় একাধিক ড্রপডাউন নিয়ে কাজ করে। তদতিরিক্ত, আমি নির্বাচিত আইটেমের উপর ক্যারেট যুক্ত করেছি:

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

Comments

আমি "আনকাড রেফারেন্স এরিয়ার: কঠোর মোডে $ xx সংজ্ঞায়িত করা হয়নি"

— ইভান টপিć

ইভান আপনি কি এমন কিছু খুঁজে পেয়েছেন যা কঠোর মোডে কাজ করে?

— জিরো-ও-

এটি একই পৃষ্ঠায় একাধিক বুটস্ট্র্যাপ ড্রপ-ডাউনের জন্য দুর্দান্ত কাজ করে। ধন্যবাদ!

— মিচ

Answer 7

আপনি অ্যাড বর্গ ব্যবহার করতে হবে openএ <div class="btn-group open">

এবং liঅ্যাডclass="active"

Answer 8

@ কাইল থেকে te .xtxt () হিসাবে উত্তরের উপর ভিত্তি করে আরও সংশোধন করা হুবহু স্ট্রিং প্রত্যাবর্তন করে, তাই কার্ট ট্যাগটি কোনও মার্কআপ হিসাবে না করে আক্ষরিকভাবে মুদ্রণ করা হয়, কেউ যদি ক্যারেটকে ড্রপডাউনটিতে অক্ষত রাখতে চান।

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});

Answer 9

আমি পৃষ্ঠায় একাধিক ড্রপডাউন জন্য স্ক্রিপ্ট সংশোধন করেছি

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

Answer 10

একাধিক ড্রপডাউন নিয়ে কাজ করার জন্য আর একটি সহজ উপায় (বুটস্ট্র্যাপ 4)

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

Answer 11

এটি একটি দীর্ঘ সমস্যা বলে মনে হচ্ছে। আমরা যা চাই তা হ'ল ইনপুট গ্রুপে একটি নির্বাচিত ট্যাগটি কার্যকর করা। তবে বুটস্ট্র্যাপ এটি করবে না: https://github.com/twbs/bootstrap/issues/10486

কৌতুকটি প্যারেন্ট ডিভিতে কেবল "বিটিএন-গ্রুপ" শ্রেণি যুক্ত করছে

এইচটিএমএল:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

JS:

$(".dropdown-menu li a").click(function(e){
    var selText = $(this).text();
    $(this).parents('.input-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');       
});

Answer 12

একবার আপনি আইটেমটি ক্লিক করলে ডেটা-নির্বাচিত-আইটেম = 'সত্য' এর মতো কিছু ডেটা অ্যাট্রিবিউট যুক্ত করে আবার পাওয়া যায়।

তারপরে আপনি ক্লিক করেছেন এমন লি উপাদানটির জন্য ডেটা-নির্বাচিত-আইটেম = 'সত্য' যুক্ত করার চেষ্টা করুন

   $('ul.dropdown-menu li[data-selected-item] a').text();

এই বৈশিষ্ট্যটি যুক্ত করার আগে আপনি তালিকার বিদ্যমান ডেটা-নির্বাচিত-আইটেমটি সরিয়ে ফেলুন। আশা করি এটি আপনাকে সহায়তা করবে

JQuery এ ডেটা অ্যাট্রিবিউট ব্যবহার সম্পর্কে তথ্যের জন্য jQuery ডেটা উল্লেখ করুন

Comments

হাই মুরালি, আপনার মন্তব্যের জন্য ধন্যবাদ, আমি এটি চেষ্টা করেছিলাম কিন্তু এখনও কিছু পাইনি var test = $('ul.dropdown-menu li').data('selected-item').find('a').text(); $("#nbtn").html(test); আপনি কি দয়া করে আমাকে জানান যে আমি কী ভুল করছি?

— Suffii

আপডেট উত্তর দেখুন। আমি কোডটি changed ('উল.ড্রপডাউন-মেনু লি [ডেটা-নির্বাচিত-আইটেম] এ') এ পরিবর্তন করেছি text পাঠ্য (); এটি ব্যবহার করে দেখুন

— মুরালি মুরুগেসন

Answer 13

আমাকে "ডকুমেন্ট.ডিয়ার" কোডের ভিতরে কিছু প্রদর্শিত জাভাস্ক্রিপ্ট লিখতে হয়েছিল। অন্যথায় তারা কাজ করেনি। সম্ভবত অনেকের কাছেই সুস্পষ্ট, তবে আমার পক্ষে তা নয়। আপনি যদি পরীক্ষা করে থাকেন তবে সেই বিকল্পটি দেখুন।

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

Answer 14

উদাহরণ স্বরূপ:

এইচটিএমএল:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

আমি শুধুমাত্র বোতামের পাঠ্য পরিবর্তন করার জন্য নতুন উপাদান বিটিএন ক্যাপশন ব্যবহার করি ।

$(document).ready(function () {}নিম্নলিখিত লেখায় আটকান

javascript:

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled) অক্ষম মেনু আইটেম ব্যবহার করার অনুমতি দেবেন না