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

Dynamically add new rows if option is equal to value

本文关键字：动态 添加 新行 option 等于 value 如果      更新时间：2023-09-26

我在bootstrap中创建了一个特定的表单。但是，我想使其动态，以便它根据字段值显示字段。例如，我怎么能添加一个文本区，如果选项字段的值是1或2?

<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/

您需要的是一个更改事件

$('#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>

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

$('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');
    }
})

小提琴

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

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();
        }
    });
});

小提琴

相关文章：