Question

编辑:(核心代码错误）

我创建了一个包含多个字段的表单，通过下拉列表选择。

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

但问题是，当我需要使用表单编辑数据时，不会触发jQuery“更改”功能，并且不会使用下拉列表选择显示的字段（下拉列表的值也会保存）。

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

这是我的标记和代码：

HTML：

<body>
<div class="div1">
    <label class="label1">label1</label>
    <select id="select">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>
</div>
<div class="div2">
    <label class="label2">label2</label>
    <input type="text" name="input1" class="input1">
</div>
<div class="div3">
    <label class="label3">label3</label>
    <input type="text" name="input2" class="input2">
</div>
<div class="div4">
    <label class="label4">label4</label>
    <input type="text" name="input3" class="input3">
</div>
<div class="div5">
    <label class="label5">label5</label>
    <input type="text" name="input4" class="input4">
</div>
</body>

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>

JSFiddle：http://jsfiddle.net/YNnCw/

Answer 1

如果你愿意使用jQuery，我写了一个小脚本来做到这一点。这只是一个简单的小函数，用于显示与select中选择的选项匹配所选选项的数据。首先它隐藏所有选项类项，然后显示具有等于所选选项的类的项。 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>

Answer 2

你应该犯错：

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

here更新的小提琴

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

2 个答案: