Javascript 根据下拉列表中的选定选项选择要隐藏/显示的字段（编辑时）

编辑：（更正代码错误）

我已经创建了一个带有多个字段的表单，通过下拉菜单进行选择

这很好，我可以保存数据到数据库

但问题是，当我需要用表单编辑数据时，jQuery“change”函数不会被触发，显示的字段也不会被下拉列表选中（下拉列表的值也是save）

我怎样才能做到这一点？也许另一个jQuery函数会更好

这是我的标记和代码：

html:

标签1
选择1
选择2
选择3
标签2
标签3
标签4
标签5

jQuery：

$(document).ready(function() {
    $('.div2').hide();
    $('.div3').hide();
    $('.div4').hide();
    $('.div5').hide();

    $('#select').change(function () {
        if ($('#select option:selected').text() == "option1"){
            $('.div2').show();
            $('.div3').hide();
            $('.div4').hide();
            $('.div5').show();
        }
        else if ($('#select option:selected').text() == "option2"){
            $('.div2').hide();
            $('.div3').show();
            $('.div4').hide();
            $('.div5').show();
        }
        else if ($('#select option:selected').text() == "option3"){
            $('.div2').hide();
            $('.div3').hide();
            $('.div4').show();
            $('.div5').show();
        }
    }); 
});
</script>

$（文档）.ready（函数（）{
$（'.div2'）.hide（）；
$（'.div3'）.hide（）；
$（'.div4'）.hide（）；
$（'.div5'）.hide（）；
$（'#select'）。更改（函数（）{
如果（$（'#选择选项：已选定'）。text（）=“选项1”）{
$（'.div2'）.show（）；
$（'.div3'）.hide（）；
$（'.div4'）.hide（）；
$（'.div5'）.show（）；
}
else if（$（'select option:selected'）。text（）=“option2”）{
$（'.div2'）.hide（）；
$（'.div3'）.show（）；
$（'.div4'）.hide（）；
$（'.div5'）.show（）；
}
else if（$（'select option:selected'）。text（）=“option3”）{
$（'.div2'）.hide（）；
$（'.div3'）.hide（）；
$（'.div4'）.show（）；
$（'.div5'）.show（）；
}
}); 
});

---

jsIDLE:

您犯了一个错误，应该是：

$('#select option:selected').text()

---

更新后的小提琴

如果您犯了错误，它应该是：

$('#select option:selected').text()

---

更新后的fiddle

如果您愿意使用jQuery，我编写了一个小脚本来实现这一点。 这只是一个简单的小函数，用于显示与“选择与选择”选项中所选选项匹配的数据。首先它隐藏所有选项类项，然后显示与所选选项相等的类的项。id是用于此实例的所有选项的类。这允许您在一个页面上有多个。 你可以看看下面的例子

表单中的行根据类显示或不显示。例如div类中的“optionName”与主选择器的ID相同，因此被隐藏。如果选择值 是选项3，则该div将显示

Option Type:

                <select name="optionName" id="optionName" class="chooseOption">
                <option value = "" >Select a Type</option>
                <option value = "option1">option1</option>
                <option value = "option2">option2</option>
                <option value = "option3">option3</option>
                </select>

<div class = "optionName option1"> option1 stuff</div>
<div class = "optionName option2"> option2 stuff</div>
<div class = "optionName option3"> option3 stuff</div>

<script type="text/javascript">
     $(".optionName").hide();

$("document").ready(function() {   /// have to wait till after the document loads to run these things

    $("select.chooseOption").change(function(){
        $("."+this.id).hide();
        var thisValue = $(this).val();
        if (thisValue != "")
        $("."+thisValue).show();
    });
});

</script>

选项类型：
选择一种类型
选择1
选择2
选择3
选项1
选项2材料
选项3
$（“.optionName”）.hide（）；
$（“document”）.ready（function（）{///必须等到文档加载后才能运行这些东西
$（“select.chooseOption”）.change（函数（）{
$（“+this.id）.hide（）；
var thisValue=$（this.val（）；
如果（thisValue！=“”）
$（“+thisValue）.show（）；
});
});

如果您愿意使用jQuery，我编写了一个小脚本来实现这一点。 这只是一个简单的小函数，用于显示与“选择与选择”选项中所选选项匹配的数据。首先它隐藏所有选项类项，然后显示与所选选项相等的类的项。id是用于此实例的所有选项的类。这允许您在一个页面上有多个。 你可以看看下面的例子

表单中的行根据类显示或不显示。例如div类中的“optionName”与主选择器的ID相同，因此被隐藏。如果选择值 是选项3，则该div将显示

Option Type:

                <select name="optionName" id="optionName" class="chooseOption">
                <option value = "" >Select a Type</option>
                <option value = "option1">option1</option>
                <option value = "option2">option2</option>
                <option value = "option3">option3</option>
                </select>

<div class = "optionName option1"> option1 stuff</div>
<div class = "optionName option2"> option2 stuff</div>
<div class = "optionName option3"> option3 stuff</div>

<script type="text/javascript">
     $(".optionName").hide();

$("document").ready(function() {   /// have to wait till after the document loads to run these things

    $("select.chooseOption").change(function(){
        $("."+this.id).hide();
        var thisValue = $(this).val();
        if (thisValue != "")
        $("."+thisValue).show();
    });
});

</script>

选项类型：
选择一种类型
选择1
选择2
选择3
选项1
选项2材料
选项3
$（“.optionName”）.hide（）；
$（“document”）.ready（function（）{///必须等到文档加载后才能运行这些东西
$（“select.chooseOption”）.change（函数（）{
$（“+this.id）.hide（）；
var thisValue=$（this.val（）；
如果（thisValue！=“”）
$（“+thisValue）.show（）；
});
});

你能提供吗？在这里添加：@MarkWylde甚至不是你的问题，你都在上面！谢谢你的帮助，先生。干杯@chadocat你应该把它改回原来的错误，把编辑过的版本放在下面，因为Daniele的答案现在没有意义了。仅供参考；）很抱歉，无法执行此操作，但请在JSFIDLE的BIKING btw thx处进行编辑！你能提供吗？在这里加上：@MarkWylde甚至不是你的问题，你都在这里！谢谢你的帮助，先生。干杯@chadocat你应该把它改回原来的错误，把编辑过的版本放在下面，因为Daniele的答案现在没有意义了。仅供参考；）很抱歉，无法执行此操作，但请在JSFIDLE的BIKING btw thx处进行编辑！我喜欢这段代码，我已经测试过了，效果很好。但是你如何在一个编辑页面中实现它，比如在一个下拉列表中，一个Id已经被选择了。我像这样的代码，我已经测试过了，效果很好。但如何在编辑页面中实现它，就像在下拉列表中一样，已经选择了一个Id