আমি কি jQuery ব্যবহার করে একটি ড্রপডাউনলিস্ট খুলতে পারি?

Question 1

এইচটিএমএলে এই ড্রপডাউনলিস্টের জন্য:

<select id="countries">
<option value="1">Country</option>
</select>

আমি তালিকাটি খুলতে চাই (এটিতে বাম ক্লিকের মতো)। এটি কি জাভাস্ক্রিপ্ট (বা আরও বিশেষত jQuery) ব্যবহার করে সম্ভব?

Question 2

আপনি সহজেই কোনও উপাদানের উপর ক্লিক ক্লিক করতে পারেন , তবে একটিতে ক্লিক করুন<select> করলে ড্রপডাউন খুলবে না open

একাধিক নির্বাচন ব্যবহার করা সমস্যাযুক্ত হতে পারে। সম্ভবত আপনার কোনও ধারক উপাদানের ভিতরে রেডিও বোতামগুলি বিবেচনা করা উচিত যা আপনি প্রসারিত এবং প্রয়োজন অনুযায়ী চুক্তি করতে পারেন।

Question 3

আমি একই জিনিসটি খুঁজতে চেষ্টা করছিলাম এবং হতাশ হয়েছি। আমি নির্বাচন বাক্সের জন্য বৈশিষ্ট্য আকার পরিবর্তন করে শেষ করেছি যাতে এটি খোলার জন্য প্রদর্শিত হয় open

$('#countries').attr('size',6);

এবং তারপরে আপনি যখন শেষ করবেন

$('#countries').attr('size',1);

Question 4

আমি একই সমস্যা জুড়ে এসেছি এবং আমার একটি সমাধান আছে। ExpandSelect () নামে একটি ফাংশন যা "নির্বাচন করুন" উপাদানটিতে মাউসের ক্লিককে অনুকরণ করে, এটি এমন একটি অন্য <select>উপাদান তৈরি করে যা একেবারে posioned হয় এবং sizeবৈশিষ্ট্যটি সেট করে একবারে একাধিক বিকল্প দৃশ্যমান হয় । সমস্ত বড় ব্রাউজারে পরীক্ষিত: ক্রোম, অপেরা, ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার। কোডটির সাথে এটি কীভাবে কাজ করে তা ব্যাখ্যা:

সম্পাদনা (লিঙ্কটি নষ্ট হয়ে গেছে) ।

আমি গুগল কোডে একটি প্রকল্প তৈরি করেছি, কোডটির জন্য সেখানে যান:

http://code.google.com/p/expandselect/

স্ক্রিনশট

ক্লিক অনুকরণ করার সময় জিইউআইয়ের মধ্যে কিছুটা পার্থক্য রয়েছে, তবে এটি আসলে কিছু যায় আসে না, এটি নিজের জন্য দেখুন:

মাউস ক্লিক করার সময়:

_{(উত্স: googlecode.com )}

অনুকরণক ক্লিক যখন:

_{(উত্স: googlecode.com )}

প্রকল্পের ওয়েবসাইটে আরও স্ক্রিনশট, উপরের লিঙ্ক।

Question 5

এটি ঠিক উপরের উত্তরগুলি থেকে ছড়িয়ে পড়ে এবং সেখানে আসলে কতগুলি অপশন রয়েছে তার সাথে সামঞ্জস্য করতে বিকল্পগুলির দৈর্ঘ্য / সংখ্যা ব্যবহার করে।

আশা করি এটি কাউকে তাদের প্রয়োজনীয় ফলাফল পেতে সহায়তা করবে!

    function openDropdown(elementId) {
        function down() {
            var pos = $(this).offset(); // remember position
            var len = $(this).find("option").length;
                if(len > 20) {
                    len = 20;
                }

            $(this).css("position", "absolute");
            $(this).css("zIndex", 9999);
            $(this).offset(pos);   // reset position
            $(this).attr("size", len); // open dropdown
            $(this).unbind("focus", down);
            $(this).focus();
        }
        function up() {
            $(this).css("position", "static");
            $(this).attr("size", "1");  // close dropdown
            $(this).unbind("change", up);
            $(this).focus();
        }
        $("#" + elementId).focus(down).blur(up).focus();
    }

Question 6

এটি এটি আবরণ করা উচিত:

 var event;
 event = document.createEvent('MouseEvents');
 event.initMouseEvent('mousedown', true, true, window);
 countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var

এটি উদাহরণস্বরূপ একটি কীপ্রেস ইভেন্টে আবদ্ধ হতে পারে, সুতরাং যখন উপাদানটি ফোকাস করবে তখন ব্যবহারকারী টাইপ করতে পারে এবং এটি স্বয়ংক্রিয়ভাবে প্রসারিত হবে ...

--সূত্র--

  modal.find("select").not("[readonly]").on("keypress", function(e) {

     if (e.keyCode == 13) {
         e.preventDefault();
         return false;
     }
     var event;
     event = document.createEvent('MouseEvents');
     event.initMouseEvent('mousedown', true, true, window);
     this.dispatchEvent(event);
 });

Question 7

সহজ একটি সহজ উপায়।

function down(what) {
  pos = $(what).offset();  // remember position
  $(what).css("position","absolute");
  $(what).offset(pos);   // reset position
  $(what).attr("size","10"); // open dropdown
}

function up(what) {
$(what).css("position","static");
$(what).attr("size","1");  // close dropdown
}

এখন আপনি নিজের ড্রপডাউনটিকে ঠিক এভাবে কল করতে পারেন

<select onfocus="down(this)" onblur="up(this)">

আমার জন্য নিখুঁত কাজ করে।

হতে পারে আরও ভাল, কারণ পৃষ্ঠায় অন্যান্য এলিমেটসের অবস্থান নিয়ে আপনার কোনও সমস্যা নেই।

function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}

function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}

আইডি পরিবর্তন করুন স্থির মান মাইব স্মার্ট নয় তবে আমি আশা করি আপনি আদর্শটি দেখবেন।

Question 8

জাভাস্ক্রিপ্টের কোনও উপাদানটিতে "ক্লিক" করা সম্ভব নয় (আপনি সংযুক্তকে ট্রিগার করতে পারেন) onclick ইভেন্টটি করতে পারেন, তবে আপনি আক্ষরিকভাবে এটি ক্লিক করতে পারবেন না)

তালিকার সমস্ত আইটেম দেখতে, তালিকাটিকে একটি multipleতালিকা তৈরি করুন এবং এর আকার বাড়ান, যেমন:

<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>

Question 9

না আপনি পারবেন না।

আপনি আকারটিকে আরও বড় করতে ... Dreas ধারণার অনুরূপ পরিবর্তন করতে পারেন তবে এটি আপনার আকার পরিবর্তন করতে হবে is

<select id="countries" size="6">
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  <option value="3">Country 3</option>
  <option value="4">Country 4</option>
  <option value="5">Country 5</option>
  <option value="6">Country 6</option>
</select>

Question 10

আমি এমপ্রিফেক্টের উত্তরটি ব্যবহার করার চেষ্টা করেছি এবং আমার বেশ কয়েকটি গ্লিট হয়েছে। বেশ কয়েকটি ছোট পরিবর্তন সহ, আমি এটি আমার পক্ষে কাজ করতে সক্ষম হয়েছি। আমি কেবল এটি পরিবর্তন করেছি যাতে এটি কেবল একবার এটি করতে পারে। আপনি ড্রপডাউন থেকে প্রস্থান করার পরে, এটি ড্রপডাউনগুলির নিয়মিত পদ্ধতিতে ফিরে যাবে।

function down() {
    var pos = $(this).offset(); // remember position
    $(this).css("position", "absolute");
    $(this).offset(pos);   // reset position
    $(this).attr("size", "15"); // open dropdown
    $(this).unbind("focus", down);
}
function up() {
    $(this).css("position", "static");
    $(this).attr("size", "1");  // close dropdown
    $(this).unbind("change", up);
}
function openDropdown(elementId) {
    $('#' + elementId).focus(down).blur(up).focus();
}

Question 11

একটি জিনিস যা এর উত্তর দেয় না তা হ'ল আপনি যখন নিজের আকার = এন করে নিখরচায় অবস্থান তৈরি করার পরে বাছাই তালিকার বিকল্পগুলির একটিতে ক্লিক করেন তখন কি হয়।

যেহেতু অস্পষ্ট ইভেন্টটি এর আকার = 1 করে তোলে এবং এটি দেখতে কেমন আবার ফিরে আসে, আপনারও এর মতো কিছু হওয়া উচিত

$("option").click(function(){
    $(this).parent().blur();
});

এছাড়াও, যদি আপনি অন্যান্য উপাদানগুলির পিছনে নিখুঁত অবস্থান নির্ধারিত তালিকা নির্বাচন করে সমস্যা নিয়ে থাকেন তবে কেবল একটি লিখুন

z-index: 100;

বা নির্বাচনের স্টাইলে এর মতো কিছু।

Question 12

অতি সহজ:

var state = false;
$("a").click(function () {
    state = !state;
    $("select").prop("size", state ? $("option").length : 1);
});

Question 13

যেমন বলা হয়েছে, আপনি <select>জাভাস্ক্রিপ্ট ব্যবহার করে প্রোগ্রামগতভাবে খুলতে পারবেন না ।

তবে, আপনি নিজের <select>চেহারাটি পুরো চেহারাটি পরিচালনা করতে এবং নিজেকে অনুভব করতে পারেন। গুগল বা ইয়াহুতে স্ব-পরিপূর্ণ অনুসন্ধানের পদগুলির জন্য আপনি যা দেখতে পান তার মতো কিছু বা আবহাওয়া নেটওয়ার্কে অবস্থানের জন্য অনুসন্ধান বাক্স ।

আমি এখানে jQuery এর জন্য একটি খুঁজে পেয়েছি । এটি আপনার চাহিদা মেটাবে কিনা তা আমার কোনও ধারণা নেই তবে এটি আপনার প্রয়োজনীয়তা সম্পূর্ণরূপে পূরণ না করলেও এটিকে সংশোধন করা সম্ভব হবে যাতে এটি অন্য কোনও ক্রিয়াকলাপ বা ইভেন্টের ফলস্বরূপ খোলা যায়। এটি আসলে আরও আশাব্যঞ্জক দেখাচ্ছে।

Question 14

আমি সবে যুক্ত করেছি

select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
    length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();

এবং নির্বাচন যোগ করুন

onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"

ক্লাসিকের মতো একই চেহারা তৈরি করতে (এইচটিএমএল বাকি অংশে ওভারল্যাপ করুন)

Question 15

হয়ত দেরি হয়ে গেছে, তবে আমি এটি সমাধান করেছি: http://jsfiddle.net/KqsK2/18/

$(document).ready(function() {
  fixSelect(document.getElementsByTagName("select"));
                      });                       

   function fixSelect(selectList)
            {
            for (var i = 0; i != selectList.length; i++)
              {

                 setActions(selectList[i]);
              }
            }


   function setActions(select)
            {
               $(select).click(function() {
                   if (select.getElementsByTagName("option").length == 1)
                        {
                          active(select);
                        }
                      });
                $(select).focus(function() {
                       active(select);
                       });
                $(select).blur(function() {
                       inaktiv(select);
                       });
                $(select).keypress(function(e) {
                      if (e.which == 13) {

                      inaktiv(select);
                          }
                       });
                  var optionList = select.getElementsByTagName("option");

                  for (var i = 0; i != optionList.length; i++)
                           {
                                setActionOnOption(optionList[i], select);
                           }
      }

  function setActionOnOption(option, select)
      {
                    $(option).click(function() {
                                inaktiv(select);
                        });
      }

  function active(select)
      {
          var temp = $('<select/>');
              $('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
               $(temp).insertBefore($(select));

              $(select).attr('size', select.getElementsByTagName('option').length);
              $(select).css('position', 'absolute');
              $(select).css('margin-top', '-6px');
              $(select).css({boxShadow: '2px 3px 4px #888888'});



                        }

        function inaktiv(select)
                   {
                 if($(select).parent().children('select').length!=1)
                     {
                                             select.parentNode.removeChild($(select).parent().children('select').get(0));
                                }
                $(select).attr('size', 1);
                $(select).css('position', 'static');
                $(select).css({boxShadow: ''});
                $(select).css('margin-top', '0px');

                  }