বুটস্ট্র্যাপ সহ আমি কীভাবে একটি তালিকা নির্বাচন বক্স (ড্রপডাউন) উপস্থাপন করতে পারি?

Question

বক্সের বাইরে এমন কিছু আছে যা বুটস্ট্র্যাপ "নিয়মিত" ডিফ্যাক্টো ড্রপ ডাউন তালিকা নির্বাচন বাক্সকে রেন্ডার করতে সমর্থন করে? তা হ'ল, যেখানে ড্রপ ডাউন বাক্সটি মানগুলির একটি তালিকা এবং যদি নির্বাচিত হয় তবে তালিকা বাক্সের বিষয়বস্তু জনবসতিপূর্ণ হয়?

এই কার্যকারিতা অনুরূপ কিছু?

http://bootstrapformhelpers.com/select/

Comments

আপনি কি বোঝাতে চান - getbootstrap.com/css/#forms-controls ( নির্বাচন নীচে )?

— চিয়ারসোশ

এইভাবে কাজটি সাধারণভাবে নির্বাচন করে। এটি বিকল্পগুলির একটি তালিকা, আপনি একটি নির্বাচন করুন এবং এটি মান হয়ে যায়। আপনি কী জিজ্ঞাসা করছেন ভিন্ন?

— বুরহান খালিদ

এখন আমি কেবল ভাবছি যে কীভাবে আমি সেই চেহারাযুক্ত ড্রপডাউন আইকনটিকে একটি সুন্দর দেখাচ্ছে কেরেটের সাথে প্রতিস্থাপন করতে পারি। :)

— Genxgeek

Getbootstrap.com থেকে: এখানে <সিলেক্ট> উপাদানগুলি এড়িয়ে চলুন কারণ তারা ওয়েবকিট ব্রাউজারগুলিতে পুরোপুরি স্টাইল করা যায় না।

— স্টুয়ার্টডনেট

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

— জে এডওয়ার্ডস

Answer 1

.form-controlফর্ম উপাদানগুলির স্টাইল করতে বুটস্ট্র্যাপ 3 ক্লাস ব্যবহার করে ।

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

http://getbootstrap.com/css/#forms-controls

Comments

নিজেকে এখানে খুঁজে পেয়েছি কারণ এলমকে ব্যবহার না করেই আমার একটি বুটস্ট্র্যাপ চেহারা দরকার ছিল bootstrap.js। এটি এবং 'ফুল' বুটস্ট্র্যাপ সমাধানের (@ জোনাথান এডওয়ার্ডস দ্বারা নির্দেশিত) মধ্যে মূল ভিজ্যুয়াল পার্থক্যটি হ'ল যে মেনুটি প্রদর্শিত হয় তা alertআপনার ব্রাউজারের যে বাক্সটি সরবরাহ করে সেই বাক্সের মতো বাক্সবান, কম সুন্দর । ছোট সমস্যা সত্যিই। আন-ক্লিক-করা নির্বাচকটি হুবহু বুটস্ট্র্যাপের মতো দেখাচ্ছে।

— রবার্ট

Answer 2

আরেকটি বিকল্প হ'ল বুটস্ট্র্যাপ ড্রপডাউন jQuery ব্যবহার করে নির্বাচনের মতো আচরণ করা ...

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

http://www.bootply.com/b4NKREUPkN

Comments

আপনি যখন কোনও ফর্ম চান না তখন দরকারী। ধন্যবাদ।

— জর্জি লিটাও

Answer 3

স্কেলির সুন্দর এবং সহজ উত্তরটি এখন বুটস্ট্যাপের ড্রপডাউন সিনট্যাক্সের পরিবর্তনের সাথে পুরানো। পরিবর্তে এটি ব্যবহার করুন:

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

Answer 4

পরীক্ষা: http://jsfiddle.net/brynner/hkwhaqsj/6/

এইচটিএমএল

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
    <ul class="dropdown-menu option" role="menu">
        <li id="1"><a href="#">One</a></li>
        <li id="2"><a href="#">Two</a></li>
    </ul>
</div>

jQuery এর

$('body').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(v);
});

সিএসএস

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}

Comments

আপনার প্রয়োজন অনুযায়ী '.সিলট বাটন' শ্রেণিতে 'মিনিট প্রস্থ' ব্যবহার করুন।

— ব্রায়নার ফেরেরিরা 15'15

Answer 5

অন্য বিকল্প বুটস্ট্র্যাপ নির্বাচন ব্যবহার করা যেতে পারে । তাদের নিজস্ব কথায়:

নিয়মিত বুটস্ট্র্যাপ নির্বাচনের মতো আচরণের জন্য ডিজাইন করা বোতাম ড্রপডাউন ব্যবহার করে বুটস্ট্র্যাপের জন্য একটি পছন্দসই নির্বাচন / মাল্টিলেসলেট।

Comments

এটি যা বলে ঠিক তা করে, এবং সিডিএন এর মাধ্যমে উপলব্ধ।

— scharfmn

Answer 6

.For- নিয়ন্ত্রণ ব্যবহার না করে অন্য একটি উপায় হ'ল:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 3</a></li>
  </ul>
</div>

Answer 7

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

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});

Answer 8

বুটস্ট্রা ৩.টি .form-controlদুর্দান্ত তবে যারা বাটন এবং উল বিকল্পের সাথে ড্রপ-ডাউন পছন্দ করেন বা তাদের প্রয়োজন তাদের জন্য এখানে আপডেট কোড। স্টিভের মাধ্যমে আমি কোডটি সম্পাদনা করেছি হ্যাশ লিঙ্কে জাম্পিং এবং নির্বাচনের পরে ড্রপ-ডাউন বন্ধ করার জন্য fix

স্টিভ, বেন এবং স্কেলিকে ধন্যবাদ!

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
    $(this).closest('.dropdown').removeClass("open");
    return false;
});

Answer 9

আমি বর্তমানে ড্রপডাউনগুলির সাথে লড়াই করছি এবং আমি আমার অভিজ্ঞতাগুলি ভাগ করতে চাই:

নির্দিষ্ট পরিস্থিতি রয়েছে যেখানে <select>ব্যবহার করা যায় না এবং ড্রপডাউন সহ অবশ্যই 'অনুকরণ' করা উচিত।

উদাহরণস্বরূপ, যদি আপনি বুটস্ট্র্যাপ ইনপুট গোষ্ঠী তৈরি করতে চান, যেমন ড্রপডাউন সহ বোতামগুলি ( http://getbootstrap.com/compferences/#input-groups-buttons-roddowns দেখুন )। দুর্ভাগ্যক্রমে <select>ইনপুট গ্রুপগুলিতে সমর্থিত নয়, এটি সঠিকভাবে সরবরাহ করা হবে না।

বা ইতিমধ্যে কেউ এই সমাধান করে? আমি সমাধান সম্পর্কে খুব আগ্রহী হতে হবে।

এবং এটিকে আরও জটিল করে তোলার জন্য, আপনি $(this).text()যদি ড্রপডাউনের বিষয়বস্তু হিসাবে গ্লিপিকনস বা ফন্টের দুর্দান্ত আইকন ব্যবহার করেন তবে ড্রপডাউনে ব্যবহারকারী কী বেছে নিয়েছেন তা ধরতে আপনি এত সহজেই ব্যবহার করতে পারবেন না । উদাহরণস্বরূপ: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> কারণ এই ক্ষেত্রে কোনও পাঠ্য নেই এবং আপনি যদি কিছু যোগ করেন তবে এটি ড্রপডাউন উপাদানটিতেও প্রদর্শিত হবে এবং এটি অযাচিত।

আমি দুটি সম্ভাব্য সমাধান পেয়েছি:

1) $(this).html()নির্বাচিত <li>উপাদানটির বিষয়বস্তু পেতে এবং তারপরে এটি পরীক্ষা করতে ব্যবহার করুন তবে আপনি এমন কিছু পাবেন <a href="#0"><i class="fa fa-minus"></i></a>যাতে আপনার যা প্রয়োজন তা উত্তোলনের জন্য আপনার এটি খেলতে হবে।

2) $(this).text()লুকানো স্প্যান এ উপাদানটিতে টেক্সটটি ব্যবহার করুন এবং গোপন করুন : <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. আমার জন্য এটি সহজ এবং মার্জিত সমাধান, আপনার যা প্রয়োজন তা পেতে আপনি আপনার যে কোনও পাঠ্য রাখতে পারেন, পাঠ্যটি গোপন করা হবে এবং $(this).html()ফলাফলের 1 এর মতো ফলাফলের কোনও রূপান্তর করার দরকার নেই।

আমি আশা করি এটি পরিষ্কার হয়েছে এবং কাউকে সহায়তা করতে পারে :-)