Question

我在网络表单上有一个选择框，根据所选内容，它会显示一个隐藏的div。

<script>
$(document).ready(function () {

    $("#Select1").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("Value")=="2"){

                $("#hiddentable11").show();
            }
            else if($(this).attr("Value")=="3"){

                $("#hiddentable11").show();
            }

            else{
                $("#hiddentable11").hide();
            }
        });
    }).change();
});
</script>

表单中将包含35到40个选择框/隐藏div组合。每次选择框中的选项值都相同（0,1,2,3,4）。如果用户为Select1选择选项2或3，则会出现hiddentable11。如果他们为Select2选择选项2或3，则显示hiddentable 12我不想复制/粘贴此代码40次并在代码中将Select1 / hiddentable11更改为Select2 / hiddentable12，Select3 / hiddentable13等。如何更改这段代码，以便我可以将它重用于所有的select / div组合？

Answer 1

然后只需创建一个.Select类，并使用this，将相应的隐藏表作为用户定义的唯一数据属性传递（我以data-hidden为例）。然后，您可以通过"#"+$(this).attr("data-hidden")：

为每个项目创建正确的选择器

$(".Select").change(function () {
    $(this).find("option:selected").each(function(){
        if($(this).attr("Value")=="2") {
            $("#"+$(this).attr("data-hidden")).show();
        }
        else if($(this).attr("Value")=="3") {
            $("#"+$(this).attr("data-hidden")).show();
        }
        else {
            $("#"+$(this).attr("data-hidden")).hide();
        }
    });
}).change();

Answer 2

给所有选择框一个类，例如class="select". Then you can use this.id`获取目标元素的ID，并将其连接到DIV id。

$(".select").change(function() {
    var num = this.id.slice(6); // get N from id="SelectN"
    $("#hiddentable1" + num).toggle($(this).val() == "2" || $(this).val() == "3"));
});

Answer 3

试试这个。有了这个，你不需要依赖ID。您可以在代码和表格组合中使用多个选择框，而不必更改您的js代码。

<select id="select1">
    <option val="0">0</option>
      <option val="1">1</option>
      <option val="2">2</option>
      <option val="3">3</option>
    <option val="4">4</option>
</select>
<div id="hiddentable11">
    Hidden Contents of Select1
    </div>
<select id="select2">
    <option val="0">0</option>
      <option val="1">1</option>
      <option val="2">2</option>
      <option val="3">3</option>
    <option val="4">4</option>
</select>
<div id="hiddentable12">
    Hidden Contents of Select2
    </div>
<select id="select3">
    <option val="0">0</option>
      <option val="1">1</option>
      <option val="2">2</option>
      <option val="3">3</option>
    <option val="4">4</option>
</select>
<div id="hiddentable13">
    Hidden Contents of Select3
    </div>

$("select").change(function () {
        var index = $('select').index($(this));
        index++;
        var $this = $(this).find("option:selected").val();
            $("#hiddentable1" + index).css("display", $this === "2" || $this === "3" ? "inline-block" : "none");            
        });

http://jsfiddle.net/njzatgku/1/

将元素ID作为参数传递给jquery

3 个答案: