बटन के अंदर चयन का उपयोग कैसे करें?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि मैं एक बटन के अंदर एक चयन कैसे कर सकता हूं ताकि मैं सामान का चयन करने के लिए चयन का उपयोग कर सकूं, लेकिन चयन के बाहर वाला बटन अन्य सामानों पर क्लिक करेगा।

यह संपूर्ण सफेद क्षेत्र बटन है और चयन इसके अंदर देखा जा सकता है। मैं सभी सफेद क्षेत्र को एक बटन के रूप में उपयोग करना चाहता हूं और यदि चयन किया गया है तो चयन खुल जाएगा।

अगर मैं चयन पर क्लिक करता हूं तो अभी बटन ऑनक्लिक ट्रिगर किया गया है।

क्या मैं jQuery का उपयोग करके कुछ चुन सकता हूं यह पता लगाने के लिए कि चयन का चयन किया गया है और अन्यथा बटन क्लिक ट्रिगर किया गया है?

<button type="button" onclick="doStuff()" class="btn-lg btn-menu col-xs-6"> 
    Button 
    <select> 
     <option value="mon">Monday</option> 
     <option value="tue">Tuesday</option> 
     <option value="wed">Wednesday</option> 
    </select> 
</button> 

Answer 1

मेरा पहला समाधान पार ब्राउज़र काम नहीं किया, क्योंकि एचटीएमएल 5 बटन के भीतर इंटरैक्टिव तत्वों (जैसे select के रूप में) की अनुमति नहीं है।

इस नए समाधान के रूप में जेसन वान डर ज़ीयू फैला के साथ बटन की जगह का सुझाव दिया:

$('span').click(function(event) { 
 
    if(event.target.tagName === 'SPAN') { 
 
     alert('span pressed!'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    Button 
 
    <select> 
 
     <option value="mon">Monday</option> 
 
     <option value="tue">Tuesday</option> 
 
     <option value="wed">Wednesday</option> 
 
    </select> 
 
</span>

Answer 2

आप एक बटन के रूप अंतराल-टैग और यह शैली इस्तेमाल कर सकते हैं। इस तरह आप अपना कोड साफ और वैध रखते हैं और फिर भी अपना लक्ष्य प्राप्त करते हैं।

<span class="btn-lg btn-menu col-xs-6" onclick="doStuff()"> 
    Button 
    <select> 
     <option value="mon">Monday</option> 
     <option value="tue">Tuesday</option> 
     <option value="wed">Wednesday</option> 
    </select> 
</span> 

Answer 3

एक साधारण समाधान:

<button type="button" onclick="doStuff(event)" class="btn-lg btn-menu col-xs-6"> 
    Button 
    <select> 
     <option value="mon">Monday</option> 
     <option value="tue">Tuesday</option> 
     <option value="wed">Wednesday</option> 
    </select> 
</button> 

<script> 
    function doStuff(event) { 
     if(event.target.nodeName === 'BUTTON') { 
      // do stuff 
     } 
    } 
</script> 

Answer 4

W3C HTML5 Specification, बटन तत्व के अनुसार इंटरैक्टिव वंशज नहीं हो सकते:

Content model: 
Phrasing content, but there must be no interactive content descendant. 

चूंकि चयन interactive element है, इसलिए बटन के अंदर एक चयन डालने वैध HTML नहीं है।

जिज्ञासा से बाहर, मैंने चयन के स्टैक ऑर्डर को बढ़ाने के लिए z-index संपत्ति के साथ खेलने की कोशिश की।

JS Bin

फ़ायरफ़ॉक्स मानक का पालन किया और चयन पर बातचीत अनुमति नहीं दी।

बेशक, आप मूल तत्व के लिए एक और संरचना का उपयोग कर सकते हैं।