使用jQuery添加其他数据以选择选项

时间:2010-12-30 17:12:35

标签: javascript jquery html

我希望这是一个非常简单的问题。

我有像这样的<select>

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

我可以获取所选值(使用$("#select").val())和所选项目的显示值(使用$("#select :selected").text()

但是我如何在<option>标签中存储额外的值?我希望能够执行<option value="3.1" value2="3.2">other</option>之类的操作并获取value2属性的值(在示例中为3.2)。

6 个答案:

答案 0 :(得分:288)

HTML标记

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

<强>代码

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

在此处使用jQuery将此视为工作示例:http://jsfiddle.net/GsdCj/1/
请在此处使用纯JavaScript查看此工作示例:http://jsfiddle.net/GsdCj/2/

通过使用HTML5中的data attributes,您可以以语法有效的方式向元素添加额外的数据,也可以从jQuery轻松访问。

答案 1 :(得分:4)

对我而言,听起来你想要创建一个新属性?你想要吗

<option value="2" value2="somethingElse">...

为此,您可以

$(your selector).attr('value2', 'the value');

然后要检索它,你可以使用

$(your selector).attr('value2')

这不是有效的代码,但我想它能完成这项工作。

答案 2 :(得分:3)

我根据我的想法提出了两个例子:

http://jsfiddle.net/grdn4/

选中此项以存储其他值。它使用数据属性来存储其他值:

http://jsfiddle.net/27qJP/1/

答案 3 :(得分:0)

HTML

<Select id="SDistrict" class="form-control">
    <option value="1" data-color="yellow" > Mango </option>
</select>

JS 初始化时

   $('#SDistrict').selectize({
        create: false,
        sortField: 'text',
        onInitialize: function() {
            var s = this;
            this.revertSettings.$children.each(function() {
                $.extend(s.options[this.value], $(this).data());
            });
        },
        onChange: function(value) {
            var option = this.options[value];
            alert(option.text + ' color is ' + option.color);
        }
    });

您可以使用 option.[data-attribute] 访问选项标签的数据属性

JS 小提琴https://jsfiddle.net/shashank_p/9cqoaeyt/3/

答案 4 :(得分:-2)

HTML / JSP标记:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

JQUERY CODE: 事件:改变

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

要有一个元素libelle.val()或libelle.text()

答案 5 :(得分:-4)

在选择选项中存储另一个值:

$("#select").append('<option value="4">another</option>')