1

编辑：（更正的代码错误）

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

这工作正常，我可以将数据保存到数据库。

但问题是，当我需要使用表单编辑数据时，不会触发 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/

4

2 回答 2

4

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

表单中的行根据类显示或不显示。例如 。div 类中的“optionName”与主选择器的 ID 相同，因此被隐藏。如果选择值为 option3 则该 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>
于 2013-08-22T15:46:52.827 回答
3

你犯了一个错误应该是：

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

这里是更新的小提琴

于 2013-08-22T15:30:39.507 回答