jQuery

Question

के साथ चुनिंदा मेनू में विकल्प में चयनित विशेषता जोड़ें मैं बदसूरत डिफ़ॉल्ट चयनों को प्रतिस्थापित करने के लिए एक चयन मेनू प्लगइन बना रहा हूं और विभिन्न ओएस में सुसंगत हूं।

यहाँ डेमो (केवल फ़ायरफ़ॉक्स और वेबकिट)
http://spacirdesigns.com/selectMenu/

यह पहले से ही काम कर रहा है है, लेकिन मैं परेशानी हो रही विकल्प के लिए "चयनित" विशेषता बताए हूँ। कोड किसी अन्य विशेषता के साथ काम करता है लेकिन मैं इसे चयनित विशेषता के साथ काम नहीं कर सकता।

यह काम करता है:

select.find('option') 
    .removeAttr('whatever') 
    .eq(index).attr('whatever', 'hello'); 

यह नहीं करता है:

select.find('option') 
    .removeAttr('selected') 
    .eq(index).attr('selected', 'selected'); 

और यहाँ कोड अब तक बताया गया है:

(function($){ 

     $.fn.selectMenu = function() { 

      var select = this; 
      select.hide(); 

      var title = select.attr('title'); 
      var arrow = 'img/arrow.png'; 
      var items = ''; 

      select 
       .children('option') 
       .each(function(){ 
        var item = $(this).text(); 
        if ($(this).val() != '') { 
         $(this).attr('value', item); 
        } 
        items += '<li>' + item + '</li>' 
       }); 

      var menuHtml = 
       '<ul class="selectMenu">' + 
       '<img src="' + arrow + '" alt=""/>' + 
       '<li>' + title + '</li>' + 
       '<ul>' + items + '</ul>' + 
       '</ul>'; 

      select.after(menuHtml); 

      var menu = $(this).next('ul'); 
      var list = menu.find('ul'); 

      menu 
       .hover(function(){}, function(){ 
        list.hide(); 
       }) 
       .children('li').hover(function(){ 
        list.show(); 
       }); 

      menu.find('ul li').click(function(){ 
       var index = $(this).index(); 
       menu.children('li').text($(this).text()); 
       select.find('option') 
        .removeAttr('selected') 
        .eq(index).attr('selected', 'selected'); 
       list.hide(); 
      }); 

     }; 

    })(jQuery); 

Answer 1

बाहर चेक this previous detailled answer on SO:

आप वास्तव में चयनित विशेषता के साथ HTML उत्पादन maitain चाहते हैं, और न केवल jQuery सही SelectedIndex चयन तत्व में यह विशेषता maitaining है, तो आप (मूल settAttr साथ हैक कर सकते हैं) समारोह :

select[0].options[select[0].selectedIndex].setAttribute('selected','selected'); 

लेकिन जैसे ही आप() या वैल के लिए jQuery तरीकों का उपयोग कर रखना ': चयनित', आप किसी भी समस्या मिल should'nt, आप समस्या हो सकती केवल यदि आप चयनित विशेषता ढूंढने के लिए एचटीएमएल पार्स करने गए थे, ऐसा कुछ जो आपको नहीं करना चाहिए, कभी नहीं।

Answer 2

अपने नवीनतम टिप्पणी को ध्यान में रखते मुझे लगता है आपकी समस्या फ़ायरबग है , आपका कोड नहीं। यह "चयनित" को छोड़कर अन्य विशेषताओं के साथ क्यों काम करता है, यह है कि ड्रॉपडाउन से एक विकल्प का चयन करने से डीओएम में चयनित विशेषता को संशोधित नहीं किया जाता है। मैं आपको आश्वासन देता हूं, आपके कोड में कुछ भी गलत नहीं है।

Answer 3

jQuery 1.6 के रूप में "डीओएम गुणों को पुनर्प्राप्त करने और बदलने के लिए जैसे तत्वों की जांच, चयनित, या अक्षम स्थिति, .prop() विधि का उपयोग करें।"

$("#someselect option[value=somevalue]").prop("selected", "selected")