Datalist अजीब व्यवहार

Question

यहां दो भिन्न datalist एक patient filenumber राज्य के साथ दूसरे के साथ

<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> 
 
      <datalist id="patient-list"> 
 
      <option value='49'>pc123</option> 
 
      <option value='48'>pc162</option> 
 
      <option value='47'>pc183</option> 
 
      <option value='45'>pc193</option> 
 
      </datalist> 
 

 
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state"> 
 
      <datalist id="state-list"> 
 
      <option value='delhi'>delhi</option> 
 
      <option value='mumbai'>mumbai</option> 
 
      <option value='Haryana'>Haryana</option> 
 
      <option value='Gurgaon'>Gurgaon</option> 
 
      </datalist>

जब आप दोनों के लिए ड्रॉप डाउन मेनू खोलने आप रोगी शो value & innerHTML दोनों और उल्टे (के लिए input देखेंगे हैं इसे क्लिक करने पर इनपुट फ़ील्ड के अंदर मूल्य दर्ज किया जाता है)। और राज्य input में यह बस राज्य दिखाएं

इन विभिन्न व्यवहारों का कारण क्या है? मैं इनपुट करने के लिए सिर्फ innerHTML राज्य input तरह option के दिखाने के लिए <datalist> का उपयोग <select> तरह काम नहीं करता value & innerHTML

Answer 1

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

Show datalist labels but submit the actual value

Answer 2

मैं अपने सटीक सवाल का जवाब नहीं कर सकते हैं, अर्थात "इसका कारण क्या है", मैं आपको बता सकता हूं कि क्यों ऐसा होता है।

कोड (जो भी वेब ब्राउज़र आप चला रहे हैं) चल रहा कार्यक्रम का उद्देश्य कार्यशीलता का एक परिणाम के रूप में .innerHTML विशेषता विकल्प तत्व के दाईं ओर दिखाया गया है तभी .innerHTML मूल्य और .Value मूल्य भिन्न होते हैं।

यहाँ कार्रवाई में यह दिखा एक बेला है, मैं एक उदाहरण के रूप में एक ही .innerHTML मूल्य और .Value मूल्य के लिए पहला विकल्प बदल दिया है: https://jsfiddle.net/87h3bcwd/

Datalist तत्व पर

अतिरिक्त पठन कि मैं उपयोगी पाया http://www.w3.org/TR/html5/forms.html#the-datalist-element

कोड::

<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> 
 
      <datalist id="patient-list"> 
 
      <option value='49'>49</option> 
 
      <option value='48'>pc162</option> 
 
      <option value='47'>pc183</option> 
 
      <option value='45'>pc193</option> 
 
      </datalist> 
 

 
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state"> 
 
      <datalist id="state-list"> 
 
      <option value='delhi'>delhi</option> 
 
      <option value='mumbai'>mumbai</option> 
 
      <option value='Haryana'>Haryana</option> 
 
      <option value='Gurgaon'>Gurgaon</option> 
 
      </datalist>

इस सवाल का जवाब देने में