Катастрофа

Ответ 1

Пока я не могу ответить на ваш точный вопрос, И.Е. "В чем причина этого", я могу сказать вам, почему это происходит.

В результате предполагаемой функциональности программы, выполняющей код (в зависимости от того, какой браузер вы используете), атрибут .innerHTML отображается справа от элемента option только в том случае, если значение .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>

Ответ 2

Использование <datalist> не работает как <select>. Он всегда отображает атрибут value и не позволяет изменять его по умолчанию. Этот ответ показывает, как отображать другой текст, если вам нужно - он состоит из использования атрибута data- и обработки его с помощью JavaScript:

Показывать ярлыки каталогов, но представить фактическое значение