нести некоторую дополнительную информацию в раскрывающемся списке выбора / опции HTML

Question

Я хочу перенести некоторую дополнительную скрытую информацию (например, почтовый индекс) в HTML выберите / опцию раскрывающийся список и сделайте его доступным для функции JavaScript, когда пользователь изменяет выбор поля опции.

Это то, что я хотел бы сделать (но это не работает).

<select id="sel_activity" onchange="selectionChange(this.info)"> 
    <option info=""       value="CAR">CAR PROBLEM</option> 
    <option info=""       value="COFFEE">Coffee Break</option>
    <option info="45678"  value="INV">INVENTORY COUNT</option>
    <option info="23567"  value="INVDROP">Inventory</option>
    <option info="" value="LUNCH">Lunch Break</option> 
    <option info="87654"  value="MEET">Meeting</option>
</select>

.
.
.

function selectionChange(info){      
    alert(info);
}

Answer 1

HTML 5 предоставляет атрибуты data- *, вы можете определить свои собственные атрибуты, просто добавив им префикс data-.Как data-info, data-zip или что-то еще.

Answer 2

Я бы использовал JQuery для получения значения атрибута, используя эту функцию:

attr( attributeName )

как то так:

       $("select").change(function () {

          $("select option:selected").each(function () {
                var info = $(this).attr("info");
                alert(info);
              });

        })
        .trigger('change');

и вы можете установить значение атрибута с помощью той же функции:

 attr( attributeName, value )

проверить API

Answer 3

onchange="selectionChange(this.options.item(this.selectedIndex).getAttribute('info'))"

Answer 4

Поскольку ваши пользователи используют старые браузеры, может работать строка с разделителем или символьной линией.

Например ...

<select id="sel_activity" onchange="selectionChange(this)">
  <option value="|CAR">CAR PROBLEM</option> 
  <option value="|COFFEE">Coffee Break</option>
  <option value="45678|INV">INVENTORY COUNT</option>
  <option value="23567|INVDROP">Inventory</option>
  <option value="|LUNCH">Lunch Break</option> 
  <option value="87654|MEET">Meeting</option>
</select>

Со стандартным JavaScript ...

 function selectionChange(o) {
   // an alternative ...    
   var values = o.options[o.options.selectedIndex].value.split("|");            
   alert("Selected Index? "+(o.options.selectedIndex+1)
    +"\nInfo? "+values[0]
    +"\nValue? "+values[1]);
   values = null;
  }

Answer 5

class и id - хорошие атрибуты, которые можно использовать для хранения информации такого рода.Однако следует иметь в виду, что по стандартам W3C id не может начинаться с цифры, поэтому, если вы надеетесь сохранить числа в качестве дополнительной информации, вам придется либо использовать class, либо реализовать дополнительный Javascript.который извлекает число из id, как функция substr.

Answer 6

Самый простой будет иметь параллельный массив и, учитывая значение выбора, он найдет значение в массиве, чтобы раскрыть требуемое дополнительное информационное значение.

Другой вариант - вызвать вебсервис для поиска информации по заданному значению, если она не является избыточной для вашего типа проекта