HTML कस्टम मूल्य दर्ज करने के लिए विकल्प के साथ चयन करें

Question 1

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

मैं <select>कस्टम मूल्य को कैसे स्वीकार कर सकता हूं ? उदाहरण के लिए: फोर्ड?

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

Question 2

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

अपडेट: मार्च 2019 तक सभी प्रमुख ब्राउज़र (अब सफारी 12.1 और आईओएस सफारी 12.3 सहित) datalistइस कार्यक्षमता के लिए आवश्यक स्तर का समर्थन करते हैं। विस्तृत ब्राउज़र समर्थन के लिए caniuse देखें ।

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

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

स्निपेट का विस्तार करें

Question 3

Alen Saqe की नवीनतम JSFiddle ने फ़ायरफ़ॉक्स पर मेरे लिए काम नहीं किया, इसलिए मैंने सोचा कि मैं एक सरल 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>

Question 4

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/

Question 5

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

Question 6

यदि डेंटलिस्ट विकल्प आपकी आवश्यकताओं को पूरा नहीं करता है, तो Select2 लाइब्रेरी और " डायनेमिक विकल्प निर्माण " पर एक नज़र डालें

$(".js-example-tags").select2({
  tags: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

स्निपेट का विस्तार करें

Question 7

उपरोक्त समाधान (@mickmackusa) में से एक का उपयोग करते हुए, मैंने 16.8+ रिएक्ट में हुक का उपयोग करके एक कार्यशील प्रोटोटाइप बनाया।

https://codesandbox.io/s/heuristic-dewdney-0h2y2

मुझे उम्मीद है कि यह किसी की मदद करता है।