Question

我在bootstrap中创建了一个特定的表单。但是我想让它变得动态，以便根据字段值显示字段。例如，如果选项字段的值为1或2，我该如何添加textarea？

<div class="container">
<h3>Kontakt</h3>
<div class="row">
    <div class="form-group form-group-options col-lg-6 col-centered">
        <div class="input-group input-group-option col-xs-12  col-centered">
            <input type="text" name="option[]" class="form-control" placeholder="Navn">

        </div>
        <div class="input-group input-group-option col-xs-12  col-centered">
            <input type="text" name="option[]" class="form-control" placeholder="Email">

        </div>
        <div class="input-group input-group-option col-xs-12  col-centered">
            <input type="text" name="option[]" class="form-control" placeholder="Address">

        </div>
        <div class="input-group input-group-multiple-select col-xs-12">
            <select class="form-control" name="values[]">
                <option value="">V&aelig;lg</option>
                <option value="1">Tilflytning</option>
                <option value="2">Fraflytning</option>
                <option value="3">Andet</option>
            </select>
        </div>
    </div>
</div>
</div>

https://jsfiddle.net/DTcHh/12528/

Answer 1

改变事件是你需要的

$('#select').change(function(){ 
    $(this).val()=="1" || $(this).val()=="2" ?  $('#textarea').removeClass("hidden") : $('#textarea').addClass("hidden");
}).trigger("change");

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */


body {
    margin: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <h3>Kontakt</h3>
    <div class="row">
        <div class="form-group form-group-options col-lg-6 col-centered">
            <div class="input-group input-group-option col-xs-12  col-centered">
                <input type="text" name="option[]" class="form-control" placeholder="Navn">
                
            </div>
            <div class="input-group input-group-option col-xs-12  col-centered">
                <input type="text" name="option[]" class="form-control" placeholder="Email">
                
            </div>
            <div class="input-group input-group-option col-xs-12  col-centered">
                <input type="text" name="option[]" class="form-control" placeholder="Address">
                
            </div>
            <div class="input-group input-group-multiple-select col-xs-12">
                <select id="select" class="form-control" name="values[]">
                    <option value="">V&aelig;lg</option>
                    <option value="1">Tilflytning</option>
                    <option value="2">Fraflytning</option>
                    <option value="3">Andet</option>
                </select>
            </div>
            <div class="input-group input-group-option col-xs-12  col-centered">
                <textarea class="form-control" id="textarea"></textarea>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以利用变更事件。你可以这样做：

$('select').on('change',function(e){
    //Insert your conditions, for example:
    if($(this).val()=='2'|| $(this).val()=='3'){
        //Insert here what you want, for example:
        $('<p>Test</p>').insertAfter('.input-group-multiple-select');
    }
})

Fiddle

现在让我知道这很有用。

Answer 3

有点晚了，但这是我的贡献：

jQuery(document).ready(function ($) {    
    $("select[name='values\[\]']").on("change", function () {
        if ($(this).val() == 1 || $(this).val() == 2) {
            $("#textarea").remove();
            $("<div id='textarea' class='input-group input-group-option col-xs-12  col-centered'><textarea name=''></textarea></div>")
            .insertAfter(this)
            .parent();
        } else {
            $("#textarea").remove();
        }
    });
});

Fiddle

如果option等于value，则动态添加新行

3 个答案: