Nano Hash - криптовалюты, майнинг, программирование

Странное поведение даталиста

Вот два разных 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>

Когда вы откроете раскрывающееся меню для обоих, вы заметите, что input для пациента показывает value & innerHTML и то, и другое инвертировано (при нажатии на него вводится значение в поле ввода). И в состоянии input это просто показывает состояние

В чем причина такого разного поведения? Я хочу ввести, чтобы показать только innerHTML из option, как состояние input, и иметь разные данные в value и innerHTML

input html html-datalist
06.12.2015

Ответы:


1

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

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

Вот скрипт, показывающий это в действии, я изменил первый параметр, чтобы иметь то же значение .innerHTML и значение .value в качестве примера: https://jsfiddle.net/87h3bcwd/

Дополнительная информация об элементе списка данных, которую я нашел полезной при ответе на этот вопрос: 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>

16.12.2015

2

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

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

16.12.2015
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..