कस्टम मान

दर्ज करने के विकल्प के साथ एचटीएमएल का चयन फॉर्म मैं इनपुट फ़ील्ड रखना चाहता हूं कि उपयोगकर्ता कस्टम टेक्स्ट वैल्यू दर्ज कर सकते हैं या ड्रॉप डाउन से चुन सकते हैं, सामान्य चयन केवल ड्रॉप डाउन विकल्प प्रदान करता है।कस्टम मान

उदाहरण के लिए यह कस्टम मूल्य कैसे स्वीकार कर सकता है?

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select>

संपादित: निकाला गया मृत लिंक, समाधान जवाब में हैं।

स्रोत

2011-04-13 Ib33X

आप जावास्क्रिप्ट इस्तेमाल कर सकते हैं गतिशील रूप से चयन लेकिन फिर इस जानकारी का उपयोग एक असली दर्द बन जाएगा के लिए एक विकल्प जोड़ने के लिए। – David

आप इसे थोड़ा स्क्रिप्टिंग के साथ कर सकते हैं! मैंने जवाब दिया कि नीचे! –

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

स्रोत

2011-04-13 14:06:28 Sam

मेरे पास वर्णित टिप्पणियों के आधार पर नीचे दी गई टिप्पणियों में सरल कोड है! सभी async! –

चयनित उत्तर – Mark

116

एचटीएमएल 5 में एक अंतर्निहित कॉम्बो बॉक्स है। आप input और datalist टेक्स्ट बनाते हैं। फिर datalist के id के मान के साथ, input पर list विशेषता जोड़ें।

यह इस तरह दिखता है:

<input type="text" list="cars" /> 
 
<datalist id="cars"> 
 
    <option>Volvo</option> 
 
    <option>Saab</option> 
 
    <option>Mercedes</option> 
 
    <option>Audi</option> 
 
</datalist>

महत्वपूर्ण: पता है कि datalist सभी में ब्राउज़ आर काम नहीं करता हो, वास्तव में अपने समर्थन is still very inmature as of 2018 .not सफारी द्वारा समर्थित बिल्कुल, और आंशिक रूप से क्रोम को छोड़कर अन्य सभी में।

स्रोत

2014-02-22 18:06:05 Dmitry

से नीचे दिमित्री को अपडेट किया जाना चाहिए यह सुविधा केवल ब्राउज़र के लगभग 50% द्वारा समर्थित है। केवल नवीनतम फ़ायरफ़ॉक्स, क्रोम और ओपेरा इसका समर्थन करते हैं; आईई, सफारी और मोबाइल ब्राउज़र नहीं करते हैं। देखें [http://caniuse.com/](http://caniuse.com/#feat=datalist) – markmarijnissen

यह आईई 10+ में काम करता है। यहां तक कि आपके द्वारा दिए गए स्रोत ने भी ऐसा कहा। – Dmitry

यह अभी भी सफारी पर काम नहीं करता है। – chowey

jQuery समाधान!

डेमो: http://jsfiddle.net/69wP6/2/

नीचे एक और डेमो

मैं एक मामले में कुछ इसी तरह की जरूरत जब मैं कुछ तय विकल्प था और मैं एक दूसरा विकल्प चाहते थे संपादन योग्य होने के लिए (अद्यतन!)! इस मामले में मैंने एक छिपी हुई इनपुट बनाई जो चयन विकल्प को ओवरलैप कर देगी और संपादन योग्य और jQuery का उपयोग सभी काम को निर्बाध रूप से करने के लिए करेगी।

मैं आप सभी के साथ बेवकूफ साझा कर रहा हूँ!

एचटीएमएल

<div id="billdesc"> 
    <select id="test"> 
     <option class="non" value="option1">Option1</option> 
     <option class="non" value="option2">Option2</option> 
     <option class="editable" value="other">Other</option> 
    </select> 
    <input class="editOption" style="display:none;"></input> 
</div>

सीएसएस

body{ 
    background: blue; 
} 
#billdesc{ 
    padding-top: 50px; 
} 
#test{ 
    width: 100%; 
    height: 30px; 
} 
option { 
    height: 30px; 
    line-height: 30px; 
} 

.editOption{ 
    width: 90%; 
    height: 24px; 
    position: relative; 
    top: -30px 

}

jQuery

var initialText = $('.editable').val(); 
$('.editOption').val(initialText); 

$('#test').change(function(){ 
var selected = $('option:selected', this).attr('class'); 
var optionText = $('.editable').text(); 

if(selected == "editable"){ 
    $('.editOption').show(); 


    $('.editOption').keyup(function(){ 
     var editText = $('.editOption').val(); 
     $('.editable').val(editText); 
     $('.editable').html(editText); 
    }); 

}else{ 
    $('.editOption').hide(); 
} 
});

संपादित करें: जोड़ा कुछ सरल छूता बुद्धिमान डिजाइन, ताकि लोगों को स्पष्ट रूप से देख सकते हैं, जहां इनपुट समाप्त हो जाती है!

जे एस फिडल: http://jsfiddle.net/69wP6/4/

स्रोत

2014-05-23 13:15:51

एलेन Saqe की नवीनतम JSFiddle Firefox पर मेरे लिए टॉगल नहीं किया, इसलिए मैंने सोचा कि मैं एक साधारण HTML/जावास्क्रिप्ट वैकल्पिक हल है कि अच्छी तरह से रूपों (के बारे में प्रस्तुत) दिन तक के भीतर कार्य करेंगे प्रदान करेगा कि सभी ब्राउज़र/उपकरणों द्वारा डातालिस्ट टैग स्वीकार किया जाता है। अधिक जानकारी के लिए और इसे क्रिया में देखें, http://jsfiddle.net/6nq7w/4/ पर ध्यान दें: भाई बहनों के बीच किसी भी स्थान की अनुमति न दें!

<!DOCTYPE html> 
<html> 
<script> 
function toggleField(hideObj,showObj){ 
    hideObj.disabled=true;   
    hideObj.style.display='none'; 
    showObj.disabled=false; 
    showObj.style.display='inline'; 
    showObj.focus(); 
} 
</script> 
<body> 
<form name="BrowserSurvey" action="#"> 
Browser: <select name="browser" 
      onchange="if(this.options[this.selectedIndex].value=='customOption'){ 
       toggleField(this,this.nextSibling); 
       this.selectedIndex='0'; 
      }"> 
      <option></option> 
      <option value="customOption">[type a custom value]</option> 
      <option>Chrome</option> 
      <option>Firefox</option> 
      <option>Internet Explorer</option> 
      <option>Opera</option> 
      <option>Safari</option> 
     </select><input name="browser" style="display:none;" disabled="disabled" 
      onblur="if(this.value==''){toggleField(this,this.previousSibling);}"> 
<input type="submit" value="Submit"> 
</form> 
</body> 
</html>

स्रोत

2014-05-28 03:23:39 mickmackusa

मैं फिर से उस fidle के माध्यम से जाना चाहूंगा! फ़ायरफ़ॉक्स का चुड़ैल संस्करण समर्थित नहीं था! मैंने इसे कुछ संस्करणों के साथ परीक्षण किया जो मुझे याद नहीं है! कुडोस! –

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

कस्टम मान

उत्तर

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