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

Я хочу нести дополнительную скрытую информацию (например, почтовый индекс) в раскрывающемся списке выбора/параметров 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);
}

javascript html html-select
person robert    schedule 08.10.2010    source источник
comment
Я думаю, проблема в том, что в selectionChange(this.info) это относится к выбору, а не к опции. Вам нужно получить выбранный вариант, а затем получить информацию. Вот ссылка на некоторую информацию: javascriptkit.com/jsref/select.shtml   -  person Andrew    schedule 08.10.2010
comment
Вы беспокоитесь о том, будет ли ваш код действительным для w3c или нет? Если нет, просто сделайте атрибуты для всего.   -  person ScottE    schedule 08.10.2010

Ответы (5)


arrow_upward
6
arrow_downward

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

person Maxem    schedule 08.10.2010
comment
Спасибо, но, может быть, через год или два... не спрашивайте меня, какие браузеры используют мои пользователи.. :( - person robert; 08.10.2010
comment
На самом деле это не предназначено для этого, но вы можете использовать атрибут класса, который должен поддерживаться в тегах параметров. - person Maxem; 08.10.2010
comment
@robert: Поскольку вы уже используете нестандартный атрибут info, вы также можете сделать его совместимым с HTML5. JS при этом все равно будет работать, и это лучший вариант, чем злоупотребление атрибутом класса. - person You; 08.10.2010
comment
Я считаю, что пользовательские атрибуты не сломают ни один браузер как таковой — они просто вызовут неверный HTML в браузерах, где HTML 5 не поддерживается, или если вы установите тип документа ниже HTML 5. Я имею в виду, что независимо от того, какие браузеры используют ваши пользователи. вы можете использовать настраиваемые атрибуты... они могут просто не работать в некоторых браузерах. - person ClarkeyBoy; 08.10.2010

arrow_upward
5
arrow_downward

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

attr( attributeName )

что-то вроде этого:

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

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

        })
        .trigger('change');

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

 attr( attributeName, value )

проверьте API

person mklfarha    schedule 08.10.2010

arrow_upward
2
arrow_downward

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

Такие как ...

<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;
  }
person seasonedgeek    schedule 27.10.2010

arrow_upward
0
arrow_downward

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

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

person Fadrian Sudaman    schedule 08.10.2010

arrow_upward
-1
arrow_downward

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

person Mathias Schnell    schedule 08.10.2010
comment
Обычно нет, но это хороший прием, пока HTML5 не станет мейнстримом. - person Mathias Schnell; 08.10.2010
comment
НИКОГДА. для этого используются data-атрибуты. - person Luis Masuelli; 20.02.2014