使用 jQuery 添加附加數據以選擇選項

Question

很簡單的問題，我希望。

我有像這樣的通常的<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屬性的value2 （在示例中為 3.2）。

Answer 1

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 中的數據屬性，您可以以語法有效的方式向元素添加額外的數據，該方式也可以從 jQuery 輕松訪問。

Answer 2

對我來說，聽起來您想創建一個新屬性？ 你要嗎

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

要做到這一點，你可以這樣做

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

然后要檢索它，您可以使用

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

它不會是有效的代碼，但我想它可以完成這項工作。

Answer 3

我從我認為你的問題可能是兩個例子：

http://jsfiddle.net/grdn4/

檢查這個以存儲附加值。 它使用數據屬性來存儲另一個值：

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

Answer 4

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/

Answer 5

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 代碼：事件：更改

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

擁有一個元素 libelle.val() 或 libelle.text()

Answer 6

要在選擇選項中存儲另一個值：

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