एकाधिक विकल्प ड्रॉपडाउन का मूल्य कैसे प्राप्त करें?

कहें कि मेरे पास यह ड्रॉपडाउन है:एकाधिक विकल्प ड्रॉपडाउन का मूल्य कैसे प्राप्त करें?

<select name="color" multiple="multiple"> 
<option value="red">Red</option> 
<option value="green">Green</option> 
<option value="blue">Blue</option> 
</select>

तो मूल रूप से 1 से अधिक रंग का चयन किया जा सकता है। मुझे यह पसंद है कि यदि कोई उपयोगकर्ता लाल रंग का चयन करता है, और फिर हरे रंग पर क्लिक करता है, तो मैं प्रत्येक बार एक फ़ंक्शन को कॉल करना चाहता हूं जो एक संदेश बॉक्स को पॉप करता है जिसे हाल ही में क्लिक किया गया रंग कहता है।

मैंने यह कोशिश की है:

<option value="red" onclick="alert('red');">Red</option> 
<option value="green" onclick="alert('green');">Green</option> 
<option value="blue" onclick="alert('blue');">Blue</option>

यह फ़ायरफ़ॉक्स और क्रोम में काम करता है, लेकिन IE में नहीं।

कोई विचार?

स्रोत

2010-02-14 Click Upvote

यह पूरा करने के लिए इतना जटिल है कि मैंने आइटम के नीचे एक चेकबॉक्स के साथ सूचीबद्ध करने का एक आसान विकल्प और सभी बटन का चयन/चयन रद्द करने का एक आसान विकल्प उपयोग किया। यह बहुत बेहतर काम करता है और आईई द्वारा भी समर्थित है। उनके उत्तरों के लिए सभी को धन्यवाद।

स्रोत

2010-02-15 00:30:39

मेरे उत्तर पर एक नज़र डालें (http://stackoverflow.com/questions/2261518/how-to इससे पहले कि आप अपना पसंदीदा दृष्टिकोण छोड़ दें, -get-the-value-a-multi-option-dropdown/2262938 # 2262938)। छोटे टुकड़ों में आवश्यकता को तोड़ने के बाद यह जटिल नहीं है। – Tim

$("select[name='color']").change(function() { 
    // multipleValues will be an array 
    var multipleValues = $(this).val() || []; 

    // Alert the list of values 
    alert(multipleValues[multipleValues.length - 1]); 
});

यहाँ एक और उदाहरण है: http://api.jquery.com/val/

स्रोत

2010-02-14 15:14:54

समस्या यह है कि, कई विकल्प चुने जा सकते हैं। यदि मैं हरे रंग का चयन करता हूं, तो यह काम करता है, फिर यदि CTRL दबाए रखें और लाल पर क्लिक करें, तो यह अभी भी हरा कहता है, हालांकि मैं इसे लाल –

@Click Upvote कहूंगा - अब यह एकाधिक मानों का समर्थन करता है :) –

लेकिन मैं इसे नहीं चाहता हरे और लाल दोनों कहें, मैं चाहता हूं कि यह केवल उस विकल्प को कहें जो अभी क्लिक किया गया था। उदाहरण के लिए, मैंने हरे रंग का चयन किया है, मैं CTRL पकड़ता हूं और लाल क्लिक करता हूं, मैं चाहता हूं कि यह केवल लाल कहें।अगर मेरे पास हरे और लाल दोनों चयनित हैं और मैं नीले रंग पर क्लिक करता हूं, तो मैं इसे केवल नीला कहूंगा, और –

इससे केवल पिछले (सबसे हाल) चयनित मान के सूचित करेंगे। के चयन परिवर्तन हैंडलर का उपयोग कर अपने सभी चुने गए मानों की एक सरणी वापस आ जाएगी $(this).val() कॉलिंग:

$(document).ready(function() { 
    $("select[name=color] option").click(function() { 
     alert($(this).val()); 
    }); 
});

स्रोत

2010-02-14 15:15:42 karim79

सावधान रहें कि आप कीबोर्ड का उपयोग करके एक विकल्प का चयन कर सकते हैं और यह क्लिक ईवेंट ट्रिगर नहीं करेगा :) –

IE –

@Click Upvote में काम नहीं करता है - शायद इसलिए कि मैं चयनकर्ता के नाम का चयन क्लास चयनकर्ता के रूप में कर रहा था। मैंने इसे संपादित कर लिया है, अगर आपको पसंद है तो इसे आजमाएं। – karim79

मुझे यकीन है कि क्या आप वास्तव में चाहते हैं नहीं कर रहा हूँ।

$(function(){ 
    var selected = Array(); 
    $('select[name=color] option').click(function() { 
     if($(this).is(':selected')) { 
      selected.push($(this).val()); 
     } 
     else { 
      for(var i = 0; i < selected.length;i++) { 
       if(selected[i] == $(this).val()) { 
        selected = selected.splice(i,1); 
       } 
      } 
     } 
     alert(selected[selected.length -1]) 
    });   
});

सरणी चयनित रंग के इतिहास बनाए रखने के लिए प्रयोग किया जाता है: यह हमेशा पिछले चयनित रंग सूचित करेंगे।

पिछले के लिए क्लिक किया रंग है, यह सरल है:

$(function(){ 
    $('select[name=color] option').click(function() { 
     alert($(this).val()); 
    });   
});

स्रोत

2010-02-14 15:29:08

जैसा कि मैंने karmin79 से कहा था: सावधान रहें कि आप कीबोर्ड का उपयोग करके एक विकल्प चुन सकते हैं और यह क्लिक ईवेंट ट्रिगर नहीं करेगा :) –

जब से तुम jQuery का उपयोग कर, मैं सुझाव है कि आप this superb plugins पर एक नज़र लेने के लिए। यह प्लगइन्स एक एकाधिक चयन ड्रॉपडाउन को चेकबॉक्स सूची में बदल देगा, इसलिए उपयोगकर्ता आसानी से कई मानों का चयन कर सकते हैं।

मूल्य प्राप्त करने के लिए, मेरा सुझाव है कि आप विधियों का उपयोग jQuery form plugins से करें। यह किसी भी प्रकार के फॉर्म तत्व से मूल्य प्राप्त करने का एक मजबूत तरीका है। इसके अलावा, आप आसानी से AJAX के माध्यम से अपना फॉर्म सबमिट करने के लिए इस प्लगइन का उपयोग कर सकते हैं।

स्रोत

2010-02-14 15:42:44

निम्नलिखित कोड मुझे ऐसा करना चाहिए जो मुझे लगता है कि आप बाद में हैं। हर बार एक आइटम का चयन किया जाता है, यह पिछले सूची के खिलाफ चयन की वर्तमान सूची की तुलना करके बाहर काम करता है जो आइटम को बदल दिया है:

<html> 
    <head> 
    <script type="text/javascript"> 
     function getselected(selectobject) { 
     var results = {}; 
     for (var i=0; i<selectobject.options.length; i++) { 
      var option = selectobject.options[i]; 
      var value = option.value; 
      results[value] = option.selected; 
     } 
     return results; 
     } 

     var currentselect = {}; 

     function change() { 
     var selectobject = document.getElementById("colorchooser"); 
     var newselect = getselected(selectobject); 
     for (var k in newselect) { 
      if (currentselect[k] != newselect[k]) { 
      if (newselect[k]) { 
       alert("Option " + k + " selected"); 
      } else { 
       alert("Option " + k + " deselected"); 
      } 
      } 
     } 
     currentselect = newselect; 
     } 
    </script> 
    </head> 
    <body> 
    <select id="colorchooser" 
      name="color" 
      multiple="multiple" 
      onchange='javascript:change();' 
      > 
     <option value="red">Red</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
    </select> 
    </body> 
</html>

यह फ़ायरफ़ॉक्स एट अल के रूप में इंटरनेट एक्सप्लोरर में बस के रूप में अच्छी तरह से काम करना चाहिए।

स्रोत

2010-02-14 21:45:21 Tim

एकाधिक विकल्प ड्रॉपडाउन का मूल्य कैसे प्राप्त करें?

उत्तर

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