जावास्क्रिप्ट/jQuery

Question

के साथ प्रोग्रामिक रूप से एक चयन ड्रॉपडाउन सूची बंद करें मेरे पास एक ड्रॉपडाउन है जिसे एक एकल मान के साथ प्रारंभ किया गया है। जब उपयोगकर्ता इसे क्लिक करता है, तो एकल तत्व हटा दिया जाता है और "लोडिंग" कहकर एक नया तत्व जोड़ा जाता है, फिर सर्वर पर एक AJAX कॉल जारी किया जाता है और जब रिटर्न होता है, तो नए मान नियंत्रण में जोड़े जाते हैं।

समस्या यह है कि अद्यतन करते समय नियंत्रण खुला रहता है, और मैं इसे बंद करना चाहता हूं। http://jsfiddle.net/vtortola/CGuBk/2/

उदाहरण के AJAX डेटा नहीं मिलता है शायद इसलिए है क्योंकि कुछ गलत मैं जब jsfiddle एपीआई बुला कर रहा हूँ, लेकिन यह दिखाता है कि कैसे चयन अद्यतन के दौरान खुला रहता है:

यह एक उदाहरण है।

मैं जानना चाहता हूं कि ड्रॉपडाउन सूची को प्रोग्रामेटिक रूप से अन्य इनपुट में फोकस कैसे करें।

चीयर्स।

Answer 1

मुझे किसी और के बारे में निश्चित नहीं है, लेकिन मैं क्रोम के नवीनतम स्थिर निर्माण का उपयोग कर रहा हूं, और .blur() से जुड़े अन्य उत्तरों में से कोई भी मेरे लिए काम नहीं करता है।

यह सवाल उलटा पूछते हैं: Programmatically open a drop-down menu

निष्कर्ष यह है कि प्राप्त किया जा करने के लिए लग रहा था कि यह जिस तरीके ब्राउज़र क्षेत्र तत्व क्लिक के हैंडल करने के लिए संभव नहीं है।

एक बेहतर समाधान एक शुद्ध एचटीएमएल एक के साथ लटकती को बदलने के लिए हो सकता है और इसे छिपाने जब एक साधारण .hide() कमांड के साथ की जरूरत होगी।

Answer 2

बस click के भीतर अपने बंद के इस लाइन को जोड़ें।

$(this).blur(); 

तो यह

$select.click(function(e){ 

    $select.html('<option value="-1">Loading</option>'); 

    $(this).blur(); 
    ...... 
    ... 
}); 

DEMO

हा की तरह दिखाई देगा! अगर हम क्रोम नया तो संस्करण के साथ एक मुद्दा है:

<select class="fake" style="display: none"> 
    <option value="-1">Loading</option> 
</select> 

और की तरह कुछ करना:

निम्नलिखित की तरह एक नकली select लो

$select.click(function(e) { 
    $(this).hide(0); // hide current select box 

    //$select.html('<option value="-1">Loading</option>'); 

    $('select.fake').show(0); // show the fake slide 

    $.ajax({ 
      // your code 
     }).done(function(data) { 

      $('select.fake').hide(0); 
      $select.show(0); 

     }) 
     ...... 
    }): 

DEMO

Answer 3

मैं तुम सब करने की जरूरत है लगता है कि लक्ष्य कुछ है या मैं चयन पर कहना चाहिए फोकस खो (यह धुंधला)

<select> 
    <option value="0">Initial Value</option> 
</select> 

var $select = $('select'); 
$select.click(function(e){ 

    $select.html('<option value="-1">Loading</option>'); 

    $.ajax({ 
     url: '/echo/json/', 
     method:'post', 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     data: { json: JSON.stringify([1, 2, 3]), delay:1 } 
    }).done(function(data){ 

     $.each($.map(data, function (item, i) { 
        return "<option value='" + item +"' >" + item + "</option>"; 

       }), function (i, item) { 
        $element.append(item); 
       }); 

    }).fail(function(){ 
     alert('error'); 
    }); 

    e.preventDefault(); 
    e.stopPropagation(); 
    $(this).blur();  
}); 

Answer 4

के बाद ...

$select.html('<option value="-1">Loading</option>'); 

कोशिश जोड़ने ...

$select.blur(); 

Answer 5

मैं जानता हूँ कि यह एक पुराने सवाल है और पहले से ही एक जवाब है, लेकिन मुझे लगता है कि निम्नलिखित समाधान लक्ष्य को प्राप्त करने के लिए एक उचित तरीका हो सकता है।

आप इसे फिर से प्रतिपादन द्वारा चयन के बंद होने अनुकरण कर सकते हैं।

$("#mySelect").closeSelect(); 

Answer 6

$('.select').on('change', function() { 
    $(this).click(); 
}); 

Answer 7

पुरानी पोस्ट मुझे पता है, लेकिन मैं एक बहुत ही सरल समाधान है: jQuery में आप कि प्राप्त करने के लिए एक सरल प्लगइन को लागू कर सकते हैं:

$.fn.closeSelect = function() { 
    if($(this).is("select")){ 
     var fakeSelect = $(this).clone(); 
     $(this).replaceWith(fakeSelect); 
    } 
}; 

और इसे इस तरह का उपयोग करें।

$(someSelectElement).on('change', function(e) { 
    e.target.size = 0  
} 

यदि आप सूची में किसी भी आइटम पर क्लिक करते हैं तो यह चयनित तत्व को ध्वस्त कर देगा।

Answer 8

किसी और मामले किसी में बाहर वहाँ Angular2, समाधान है कि मेरे लिए वहां काम उपयोग कर रहा है एक (फोकस) घटना है कि कॉल $($event.srcElement).attr("disabled","disabled");

जोड़ने के लिए मैं तो तत्व जब मैं चाहता हूँ पुन: सक्षम करने के लिए एक समय समाप्ति जोड़ने था यह फिर से सक्रिय हो जाएगा।

Answer 9

समाधान 1 मुझे बहुत आसान समाधान मिला।

select.style.display = "none"; 
setTimeout(function() { 
    select.style.display = "block"; 
}, 10); 

डोम में इस छिपाने तत्व, इस कारण यह है कि ड्रॉपडाउन बंद कर दिया जाएगा और उसके बाद 10ms देरी से (बिना देरी यह काम नहीं करता) यह डोम में लौट आते हैं।

समाधान 2: थोड़ा और जटिल लेकिन बिना देरी के कुल मिलाकर डीओएम से तत्व निकालें और फिर इसे वापस लौटाएं।

var parent = select.parentElement; 
var anchor = document.createElement("div"); 
parent.insertBefore(anchor, select); 
parent.removeChild(select); 
parent.insertBefore(select, anchor); 
parent.removeChild(anchor); 

यह तत्वों के सिद्धांत को स्टोर करता है, फिर चयन से पहले एंकर लाता है। पहले डीओएम में एक ही स्थिति में चयन बहाल करने के लिए एंकर है। बेशक इसे चुनिंदा तत्व को कार्यान्वित करने के लिए कार्यान्वित किया जा सकता है।

HTMLSelectElement.prototype.closeDropdown = function() { 
    var parent = this.parentElement; 
    var anchor = document.createElement("div"); 
    parent.insertBefore(anchor, this); 
    parent.removeChild(this); 
    parent.insertBefore(this, anchor); 
    parent.removeChild(anchor); 
} 

और फिर बस फोन

select.closeDropdown(); 

Example