Question

我正在寻找一种通过选择具有自定义属性show（1,2，...）的OPTION来显示DIV（show-1，show-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>，然后根据您的下拉菜单中有多少选项，请稍微重新考虑一下DRYing到隐藏/可见的切换。

<强> HTML

<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");
    }
});

Working Fiddle

Answer 2

使用data-show而不是show：

...
<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;
});

Answer 3

您可以使用show访问attr属性，就像其他任何属性一样。但是使用没有data-前缀的自定义属性是一个坏主意，所以我建议改为data-show。

使用change上的select事件触发您的更改，并且（如果您希望在有效的浏览器上保持主动）选项`上的click事件：

$("select[name=category]")
    .change(updateDivs)
    .find('option').click(updateDivs);
function updateDivs() {
    var select = $("select[name=category]"),
        val = select.val(),
        option = val && select.find("option[value=" + val + "]"),
        show = option && option.attr("data-show"); // or .attr("show") if you prefer to keep using it
    if (show) {
        $("div[id^=show-]").hide().filter("#show-" + show).show();
    }
}

使用jQuery获取自定义属性

3 个答案: