optgroups जोड़ा जा रहा है जावास्क्रिप्ट का उपयोग कर गतिशील

Question

मैं है एक (अजाक्स द्वारा) द्वारा डायनामिक रूप से उस तरह जिसके परिणामस्वरूप विकल्पों के साथ चयन बॉक्स का चयन करने के लिए:

<select id="destination" name="destination"> 
<option value="london-paris">London-Paris</option> 
<option value="paris-london">Paris-London</option> 

<option value="london-newyork">London-New-York</option> 
<option value="newyork-london">New-York-London</option> 

<option value="london-berlin">London-Berlin</option> 
<option value="berlin-london">Berlin-London</option> 

<option value="london-helsinki">London-Helsinki</option> 
<option value="helsinki-london">Helsinki-London</option> 

... वहाँ वास्तव में कर रहे हैं उनमें से अधिक नहीं बल्कि सार

जो चीज मैं चाहता हूं वह सूची के लोड होने के बाद जावास्क्रिप्ट (Jquery या Mootools का उपयोग कर) का उपयोग करके ऑप्टग्रुप द्वारा इन दो विकल्प भागों को समूहित करना है, ताकि इस समूह में से प्रत्येक से पहले - हम लेबल के साथ एक ऑप्टग्रुप टैग जोड़ सकते हैं हम जी के दूसरे विकल्प एचटीएमएल से मिलता है रप (वास्तव में डैश से पहले शब्द):

<select id="destination" name="destination"> 
<optgroup label="Paris"> 
<option value="london-paris">London-Paris</option> 
<option value="paris-london">Paris-London</option> 
</optgroup> 
<optgroup label="New-York"> 
<option value="london-newyork">London-New-York</option> 
<option value="newyork-london">New-York-London</option> 
</optgroup> 
<optgroup label="Berlin"> 
<option value="london-berlin">London-Berlin</option> 
<option value="berlin-london">Berlin-London</option> 
</optgroup> 
<optgroup label="Helsinki"> 
<option value="london-helsinki">London-Helsinki</option> 
<option value="helsinki-london">Helsinki-London</option> 
</optgroup> 
</select> 

हालांकि, प्रत्येक समूह में हमेशा दो गंतव्य होते हैं।

कृपया, सलाह दें कि को कैसे कार्यान्वित करें अग्रिम धन्यवाद।

Answer 1

आप का उपयोग जगह में ऐसा कर सकते हैं jQuery:

$(document).ready(function() { 
    var select = $('#destination'); 
    var opt1, opt2; 
    $('option', select).each(function(i) { 
     if (i % 2 === 0) { 
      opt1 = $(this); 
     } else { 
      opt2 = $(this); 
      var label = opt1.text().replace('London-', ''); 
      var optgroup = $('<optgroup/>'); 
      optgroup.attr('label', label); 
      opt2.add(opt1).wrapAll(optgroup); 
     } 

    }); 
}); 

यह कोड चुनिंदा टैग में सभी विकल्पों पर पुनरावृत्त करता है, और एक ऑप्टग्रुप में दो के प्रत्येक सेट को लपेटता है। यह विकल्पों में पाठ के आधार पर ऑप्टग्रुप को लेबल करने के बारे में भी पता लगाता है।

Answer 2

यह बहुत मुश्किल नहीं है, आपको केवल अपने विकल्पों के चारों ओर स्थानांतरित करने की आवश्यकता है। उन्हें दस्तावेज़ प्रवाह से बाहर निकालें, दो संबंधित विकल्पों के स्थान पर एक ऑप्टग्रुप जोड़ें और विकल्प को उस समूह में जोड़ें।

यह मानते हुए कि विकल्प, वास्तव में अनुक्रमिक हैं अपने उदाहरण के रूप में, एक संभव, अच्छे पुराने डोम पटकथा कार्यान्वयन इस प्रकार है:

var destinationSelect = document.getElementById("destination"); 
var options = destinationSelect.getElementsByTagName("option"); 

var optgroups = []; 

while(options.length > 0) { 

    var option1 = options[0]; 
    var option2 = options[1]; 
    var optgroup = document.createElement("optgroup"); 
    var label = option1.innerHTML.replace(/^[^\-]-/, ""); 
    optgroup.setAttribute("label", label); 
    destinationSelect.removeChild(option1); 
    destinationSelect.removeChild(option2); 
    optgroup.appendChild(option1); 
    optgroup.appendChild(option2); 

    optgroups.push(optgroup); 
} 

for(var i = 0; i < optgroups.length; i ++) { 
    destinationSelect.appendChild(optgroups[i]); 
}