使用jQuery获取自定义属性

Question

我在寻找一种显示DIV的方法(显示-1，显示-2，.)通过选择具有自定义属性显示的选项(1，2，.)。我试过的一切都没奏效..。:(

...
<select name="category" size="1">
   <option value="26" show="1">option 1</option>
   <option value="28" show="2">option 2</option>
   ...
</select>
...
<div id="show-1" style="visibility:hidden; height:0">...</div>
<div id="show-2" style="visibility:hidden; height:0">...</div>
...

谢谢

Answer 1

我建议为这个ID添加一个<select>，然后根据下拉列表中有多少选项，请重新考虑一下<select>是否隐藏/可见切换。

<select name="category" id="catselect" size="1">
   <option value="26" show="1">option 1</option>
   <option value="28" show="2">option 2</option>
</select>
<div id="show-1" style="visibility:hidden; height:0">111</div>
<div id="show-2" style="visibility:hidden; height:0">2222</div>

JS

$("#catselect").change(function() {
    var f = $("#catselect :selected");
    if (f.attr("show") == "1") {
        $("#show-1").css("visibility","visible");
        $("#show-2").css("visibility","hidden");
    } else if (f.attr("show") == "2") {
        $("#show-2").css("visibility","visible");
        $("#show-1").css("visibility","hidden");
    }
});

工频

Answer 2

使用数据显示而不是显示：

...
<select name="category" size="1">
   <option value="26" data-show="1">option 1</option>
   <option value="28" data-show="2">option 2</option>
   ...
</select>
...
<div id="show-1" style="visibility:hidden; height:0">...</div>
<div id="show-2" style="visibility:hidden; height:0">...</div>
...

然后您可以访问它，就像：

$('[name=category] option').click(function () {
    var show = $(this).attr('data-show');
});

或者，如果您喜欢原生javascript，有两种方法：

$('[name=category] option').click(function () {
    var show1 = this.getAttribute('data-show');
    var show2 = this.dataset.show;
});