क्या मैं jQuery का उपयोग करके एक लटकती सूची खोल सकता हूं

Question 1

HTML में इस लटकती सूची के लिए:

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

मैं सूची को खोलना चाहता हूं (उस पर बाएं क्लिक के समान)। क्या जावास्क्रिप्ट (या अधिक विशेष रूप से jQuery) का उपयोग करना संभव है?

Question 2

आप आसानी से किसी तत्व पर एक क्लिक का अनुकरण कर सकते हैं , लेकिन एक क्लिक पर <select>ड्रॉपडाउन नहीं खुलेगा।

कई चयनों का उपयोग समस्याग्रस्त हो सकता है। शायद आपको एक कंटेनर तत्व के अंदर रेडियो बटन पर विचार करना चाहिए जिसे आप आवश्यकतानुसार विस्तारित और अनुबंधित कर सकते हैं।

Question 3

मैं उसी चीज को खोजने की कोशिश कर रहा था और निराश हो गया। मैंने चयन बॉक्स के लिए विशेषता आकार को बदलना समाप्त कर दिया है ताकि यह खुलता दिखाई दे

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

और फिर जब आप समाप्त कर लेंगे

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

Question 4

मैं उसी समस्या को लेकर आया हूं और मेरे पास एक समाधान है। एक फ़ंक्शन जिसे ExpandSelect () कहा जाता है, जो "चुनिंदा" तत्व पर माउस क्लिक करने का अनुकरण करता है, यह ऐसा एक अन्य <select>तत्व बनाकर करता है जो बिल्कुल सकारात्मक है और sizeविशेषता सेट करके एक साथ कई विकल्प दिखाई देते हैं। सभी प्रमुख ब्राउज़रों में परीक्षण किया गया: क्रोम, ओपेरा, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर। यह कैसे काम करता है, इसका स्पष्टीकरण यहां दिए गए कोड के साथ दिया गया है:

संपादित करें (लिंक टूट गया था) ।

मैंने Google कोड पर एक परियोजना बनाई है, वहां कोड के लिए जाएं:

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

स्क्रीनशॉट

क्लिक का अनुकरण करते समय GUI में थोड़ा अंतर होता है, लेकिन यह वास्तव में मायने नहीं रखता है, इसे अपने लिए देखें:

जब माउस क्लिक:

_{(स्रोत: 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

यह एक कीप ईवेंट के लिए उदाहरण के लिए बाध्य हो सकता है, इसलिए जब तत्व पर ध्यान केंद्रित किया जाता है तो उपयोगकर्ता टाइप कर सकता है और यह अपने आप विस्तारित हो जाएगा ...

--Context--

  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
}

अब आप अपने 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

नहीं, तुम नहीं कर सकते।

आप इसे बड़ा करने के लिए आकार बदल सकते हैं ... ड्रेसे विचार के समान, लेकिन यह वह आकार है जिसे आपको बदलने की आवश्यकता है।

<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

मैंने mrperfect के जवाब का उपयोग करने की कोशिश की और मुझे कुछ ग्लिच थे। एक छोटे से बदलाव के साथ, मैं इसे मेरे लिए काम करने में सक्षम था। मैंने बस इसे बदल दिया ताकि यह केवल एक बार ही करे। एक बार जब आप ड्रॉपडाउन से बाहर निकल जाते हैं, तो यह ड्रॉपडाउन की नियमित विधि पर वापस चला जाएगा।

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

एक बात जो इसका जवाब नहीं देती है वह यह है कि जब आप अपने आकार = n को करने के बाद चयनित सूची में से किसी एक विकल्प पर क्लिक करते हैं और इसे पूर्ण स्थिति बनाते हैं।

क्योंकि धब्बा घटना इसे आकार = 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>संपूर्ण लुक को स्वयं प्रबंधित कर सकते हैं और स्वयं को महसूस कर सकते हैं। कुछ ऐसा है जो आप Google या याहू पर स्वत: पूर्ण खोज शब्दों के लिए देखते हैं ! या मौसम नेटवर्क में स्थान बॉक्स के लिए खोजें ।

मुझे 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');"

क्लासिक एक की तरह ही दिखने के लिए (शेष html को ओवरलैप करें)

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');

                  }