jQuery का उपयोग करके चुने जाने के बाद मैं <select> विकल्प कैसे हटा सकता हूं?

मैं इसे बनाने की कोशिश कर रहा हूं ताकि एक बार ड्रॉपडाउन विकल्प चुना जा सके, इसे मेनू से हटा दिया जाएगा, और फिर एक बार दूसरा विकल्प चुना गया है, तो हटाए गए विकल्प को मेनू में वापस कर दिया जाएगा। क्या jQuery का उपयोग करके ऐसा करने का कोई तरीका है?jQuery का उपयोग करके चुने जाने के बाद मैं <select> विकल्प कैसे हटा सकता हूं?

मैं jQuery और जावास्क्रिप्ट के लिए नया हूं, इसलिए मुझे यकीन नहीं है कि मैं क्या कर रहा हूं, और मेरे सभी पोकिंग के पास केवल टूटा कोड है। धन्यवाद! ,

<div class="FlightList"> 
        <select id="departureFlightsControl"> 
         <option value="default">No flight chosen</option> 
         <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option> 
         <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option> 
         <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option> 
         <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option>

और इतने पर अधिक विकल्पों के साथ:

संदर्भ के लिए, यह मेरा एचटीएमएल कैसा दिखता है। एक बार डिफ़ॉल्ट के अलावा एक विकल्प चुना जाता है, यह एक "उड़ान जानकारी" div पर आबादी है, जिसमें इसे साफ़ करने के लिए एक छोटा "एक्स" div "बटन" है। मैं एक्स बटन को सूची में वापस लौटना चाहता हूं।

स्रोत

2012-12-09 user1888527

'$ (this) .remove एक() नहीं कर रहे हैं के साथ कैश से बदल दिया जाता है' आप इसे वापस लाने के लिए जरूरत है, detach() शायद आप जो खोज रहे हैं। – adeneo

बस '

क्या आप पोस्ट कर सकते हैं जो आपने कोशिश की है कि असफल रहा? –

आप एक आधार के रूप में उपयोग कर सकते हैं:

<div class="FlightList"> 
    <select id="departureFlightsControl" onchange="addToInfo(this)"> 
     <option value="default" >No flight chosen</option> 
     <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option> 
     <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option> 
     <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option> 
     <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option> 
    </select> 
</div> 
<div id="flightInformation">  

</div> 
<script type="text/javascript"> 
function addToInfo(element){ 
    var opt = $(element).find(":selected").remove(); 
    var span = $('<span style="margin-left:20px;" onclick="addToList(this)"> X</span>'); 
    $(span).data('option', opt); 
    var div = $('<div>'+$(opt).html()+'</div>') 
    $(div).append(span); 
    $('#flightInformation').append(div); 
} 

function addToList(element){ 
    $('#departureFlightsControl').append($(element).data('option')); 
    $(element).closest('div').remove(); 
} 
</script>

स्रोत

2012-12-09 00:58:53

इनलाइन सीएसएस और घुसपैठ जेएस घटनाओं के साथ jQuery के अंदर एचटीएमएल बनाना: इन प्रथाओं को ** सभी ** से बचा जाना चाहिए। – moonwave99

यहाँ एक उचित समाधान है कि यह आसान रहता है और काम करता है। आप निश्चित रूप से कार्य की विशिष्टता को बढ़ा सकते हैं जो आप चाहते हैं।

$(document).ready(function() { 
    var temp = 0; 
    if ($(':selected')) { 
     $('select').change(function() { 
      if (temp !== 0) { 
       temp.show(); 
      } 
      temp = $(':selected').hide(); 
      return temp; 
     }); 
    } else { 
     ('select').show(); 
    } 
});

स्रोत

2012-12-09 01:25:05 MCM

'अगर ($ (चयनकर्ता)) 'हमेशा सच हो जाता है। चयनकर्ता मौजूद नहीं है, भले ही एक खाली वस्तु बनाई गई हो। इसके अलावा किसी भी 'if' तर्क को हैंडलर के अंदर होना चाहिए। शेष अवधारणा क्रॉस ब्राउज़र संगत नहीं है क्योंकि आईई 'विकल्प' टैग छुपा नहीं जाएगा। – charlietfl

मैं स्क्रिप्ट के साथ आया जिसने कम से कम फ़ायरफ़ॉक्स में ठीक काम किया। फ़ायरफ़ॉक्स में इसके साथ समस्या यह थी कि change ईवेंट तब तक आग नहीं लगाता जब तक कि आप नियंत्रण (और शायद अन्य ब्राउज़रों के अलावा) छोड़ दें, और click ईवेंट तब होता है जब आप ड्रॉपडाउन खींचते हैं, न कि चयन करते समय। इसने सिंक्रनाइज़ करना और वास्तविक उड़ान के चयन के बाद तक सूची से "कोई उड़ान चयनित नहीं" आइटम को निकालना बहुत कठिन बना दिया।

तो, मैंने इस मुद्दे पर थोड़ा सा शोध किया और फिर चुनिंदा ड्रॉपडाउन और रोलअप का पता लगाने के लिए my own jQuery plugin (jsFiddle) पर काम करने की कोशिश की। यह बेहतर प्राप्त करता है, लेकिन अभी भी फ़ायरफ़ॉक्स में पूरी तरह से काम नहीं करता है।

मेरा निष्कर्ष है कि जब आप इस तरह के एक जानवर ज्यादातर काम कर प्राप्त कर सकते हैं, तो आपको कुछ चीजों के आसपास नहीं मिल सकता है:

नहीं सभी ब्राउज़रों बातें उसी तरह लागू है, इसलिए वे "तोड़" अलग ढंग से।
फ़ायरफ़ॉक्स में, यदि आप एक डाउन-डाउन सिलेक्ट कंट्रोल वाले आईफ्रेम से बाहर निकलते हैं, तो ड्रॉपडाउन रोल हो जाता है और कुछ भी नहीं आप इसका जवाब देने के लिए कर सकते हैं। तो अब कोड थोड़ी देर के लिए गलत घटना की रिपोर्ट करता है जब तक कि आप या तो नियंत्रण छोड़ दें या पृष्ठ में कहीं और क्लिक करें।
फ़ायरफ़ॉक्स अतिरिक्त रूप से jQuery लाइब्रेरी में स्क्रिप्ट त्रुटियों को फेंक रहा था, लेकिन क्रोम नहीं।
का उपयोग करते हुए इस तरह के कीबोर्ड शॉर्टकट ऑल्ट के रूप में↓ खुला लटकती पॉप, माउस घटनाओं फेंक नहीं है कम से कम Firefox में। तो आपको कीबोर्ड घटनाओं के और भी अधिक फँसाने को जोड़ना होगा (और क्या आप वाकई मैक पर यह अधिकार प्राप्त करेंगे? एंड्रॉइड? आईफोन?)

नोट: मुझे पता है कि उस कोड में मेरा कोड इष्टतम नहीं है और इसमें बग है। यह एक छोड़ा गया प्रोटोटाइप है, न कि एक तैयार उत्पाद।:)

तो, क्या मैं सुझाव दे सकता हूं कि आप कस्टम चयन बॉक्स का उपयोग करें, जो आप चाहते हैं कि आप जो कुछ भी कर सकते हैं। यहां one example select box replacement jQuery plugin है।

स्रोत

2012-12-09 04:18:28 ErikE

यहां एक समाधान है जो पृष्ठ लोड होने पर सभी विकल्पों को कैश करता है। जब एक विकल्प चुना जाता है, विकल्प सभी विकल्पों को जिनके मान केवल चयनित

var departSelect=$('#departureFlightsControl'); 
/* cache clones of all options*/ 
var departOptions=departSelect.find('option').clone(); 

departSelect.change(function(){ 
    var currVal=$(this).val(); 

    /* other display logic using currVal*/ 


    /* get new options that don't include current one selected from cache*/ 
    var newOptions= departOptions.clone().filter(function(){ 
     return $(this).val() ! = currVal; 
    }); 

    $(this).html(newOptions) 

})

स्रोत

2012-12-09 04:52:48 charlietfl

jQuery का उपयोग करके चुने जाने के बाद मैं <select> विकल्प कैसे हटा सकता हूं?

उत्तर

संबंधित मुद्दे