एचटीएमएल चयन विकल्प में छिपा इनपुट फ़ील्ड पास करना

Question

क्या किसी को पता है कि एक HTML फॉर्म में <select><option> तत्व के साथ एक छिपे हुए अनुरोध पैरामीटर को पार करना संभव है?

इसलिए उदाहरण के लिए, यदि उपयोगकर्ता विकल्पों में से एक <select> सूची से <option value="foo">foo</option> चयन किया है, मैं किसी भी तरह में एक छिपा मूल्य, साथ ही "foo" मान पास, और पुनः प्राप्त है कि एक अनुरोध पैरामीटर के रूप में कर सकता है? जैसे <input type="hidden" name="x" value="bar"/> उपयोगकर्ता ने foo विकल्प का चयन करते समय अनुरोध से "foo" और "bar" मान प्राप्त करने में सक्षम किया।

धन्यवाद

Answer 1

एक चुनिंदा सूची में उपयोगकर्ता को प्रदर्शित किया गया एक मूल्य और फ़ॉर्म पोस्ट में सर्वर पर वापस जाने वाला मान दोनों होता है। तो तुम तैनात मूल्य में सीमांकक के कुछ प्रकार का उपयोग दोनों मूल्यों वापस भेज दिया मिलता है और फिर उन्हें उस बिंदु पर पार्स करने के लिए कर सकते हैं:

 <select id="myselectlist" > 
      <option value="foo|bar">foo</option> 
      <option value="foo2|bar2">foo2</option> 
     </select> 

लेकिन बेहतर अभी तक होगा एक आईडी मूल्य है जिसे आप करने के लिए इस्तेमाल कर सकते हैं वापस पारित करने के लिए पता है जो आइटम एक डेटाबेस से चयनित किया गया था और यह भी इसका इस्तेमाल दूसरे संबंधित आइटम को देखने के लिए:

 <select id="myselectlist" > 
      <option value="123">foo</option> 
      <option value="124">foo2</option> 
     </select> 

आपका डेटाबेस इस प्रकार दिखाई देंगे:

ID DisplayValue OtherData 
123 foo   bar  
124 foo2   bar2  

Answer 2

प्रपत्र इनपुट type='hidden' है जिसे आप नीचे चयन बूंद के onchange घटना का उपयोग कर इसे फार्म के साथ तैनात किया जाएगा अद्यतन कर सकता है। मुझे संदेह है कि आप छिपे हुए इनपुट के लिए संभावित मानों की एक सरणी बनाना चाहते हैं, जैसे कि उनके समकक्षों को चुनिंदा ड्रॉप डाउन में और फिर चयनित तत्व की selectedIndex संपत्ति का उपयोग करके इंडेक्स द्वारा सरणी में मान तक पहुंचें।

Answer 3

यहाँ एक वैकल्पिक समाधान है मानते हैं कि jQuery उपलब्ध है। यदि आप jQuery के अलावा जेएस यूटिलिटी लाइब्रेरी का उपयोग करते हैं, या कोई लाइब्रेरी नहीं है, तो यह अभी भी संभव है। यह सिर्फ चुनिंदा एक्सचेंज इवेंट में एक फंक्शन बाध्यकारी है और जेएसन को कस्टम डेटा-एट्रिब्यूट से पार्स कर रहा है।

<form> 
<select name="AnySelect"> 
<option value="primary-value0" data-support='["test",128,2014,"blackberry"]' /> 
<option value="primary-value1" data-support='["test1",39,2013,"apricot"]' /> 
<option value="primary-value2" data-support='["test2",42,2012,"peach"]' /> 
<option value="primary-value3" data-support='[null,null]' /> 
<option value="primary-value4" data-support='[30,28,null]' /> 
</select> 
. 
. 
. 
<span style="visibility: hidden" id="Support_AnySelect-container"><span> 
</form> 

^ मार्कअप ------- जावास्क्रिप्ट वी

//bind onchange once document is loaded and ready 
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); }); 

function UpdateHidden(event) 
{ 
    //Create a base name for grouping dynamic values; ex: Support_AnySelect 
    Name='Support_'+SelectField.attr('name'); 

    //Check if container was made for us already 
    Contain=$(this.parent).find('#'+Name+'-container'); 

    if(Container.length===0) //make the container if missing 
    { 
    $(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>'); 
    Contain=$(this.parent).children('#'+Name+'-container'); 
    } 

    //get our special multi-values, jQuery will auto decode the JSON 
    SupportValues = this.data('support'); 

    Contain.empty(); //get rid of last select options 
    $.each(SupportValues,function(i,val) 
    { 
    Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>'); 
    }); 
} 

इस का मुख्य लाभ यह है कि यह करना चाहिए, सिद्धांत रूप में, आप चर का एक 'चर राशि पोस्ट करते है 'फॉर्म से। आप कुछ नेस्टेड ऑब्जेक्ट्स के लिए स्क्रिप्ट को भी समायोजित कर सकते हैं। जब तक आप अपनी पसंद के डेटा-एट्रिब्यूट को वैध JSON में पास करते हैं।

अगर कोई ऐसा करने से पहले इसे बाहर कर देता है, तो कृपया मुझे बताएं। मैं बाद में इसका परीक्षण करूंगा लेकिन कुछ मामूली त्रुटियां हो सकती हैं। आपको किसी भी चुनिंदा तत्व पर इसका उपयोग करने में सक्षम होना चाहिए और छिपे हुए इनपुट स्वचालित रूप से किसी अन्य तत्व के अंदर आते हैं; स्क्रिप्ट को इन्हें आपके लिए एक ही फॉर्म टैग में होने और HTTP सरणी के माध्यम से अद्वितीय लेकिन समूहीकृत नाम होने की गारंटी भी देनी चाहिए।