Question

我需要根据div值更改select内的输入类型。这是我的HTML-

<div id="query_template" class="hide">
    <div class="col-md-12 query_row">
        <div class="row">
            <div class="col-md-3">
                <select name="t_col" class="form-control">
                    <option value="1">Col 1</option>
                    <option value="1">Col 2</option>
                    <option value="1">Col 3</option>
                    <option value="1">Col 4</option>
                    <option value="1">Col 5</option>
                    <option value="1">Col 6</option>
                </select>
            </div>
            <div class="col-md-3">
                <select name="t_rel" class="form-control">
                    <option value="equal">=</option>
                    <option value="greater_than">></option>
                    <option value="less_than"><</option>
                    <option value="like">LIKE</option>
                    <option value="range">RANGE</option>
                </select>
            </div>
            <div class="col-md-5 t_val">
                <input type="text" class="form-control" value="">
            </div>
            <div class="col-md-1">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn row-plus btn-primary">
                        <a href="#" name="plus">+</a>
                    </label>
                    <label class="btn row-minus btn-primary">
                        <a href="#" name="minus">-</a>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

现在我想更改以下输入类型 -

<div class="col-md-5 t_val">
    <input type="text" class="form-control" value="">
</div>

基于 -

<div class="col-md-3">
    <select name="t_rel" class="form-control">
        <option value="equal">=</option>
        <option value="greater_than">></option>
        <option value="less_than"><</option>
        <option value="like">LIKE</option>
        <option value="range">RANGE</option>
    </select>
</div>

到目前为止，我已经写了下面的jQuery代码 -

var changeValueInput = function () {
    var $valueInput = $("select[name=t_rel]");
    $valueInput.change(function () {
        if ($valueInput.val() == 'like') {
            $(this).parent().closest("div.t_val").remove("input").append("<input type='number' class='some-other-class'>");
        } else if ($valueInput.val() == 'range') {
            $(this).parent().closest("div.t_val").remove("input").append("another-input-type-or-any-other-html");
        } else {
            $(this).parent().closest("div.t_val").remove("input").append("another-input-type-or-any-other-html");
        }
    });
}

但没有任何事情发生。任何支持都会很棒。

提前致谢。

Answer 1

问题是您没有执行该功能，$(this).parent().closest("div.t_val")也无效。

像这样更改你的jQuery代码：

var changeValueInput = function () {
    var $valueInput = $("select[name=t_rel]");

    $valueInput.change(function () {
        var el = $(this).parents('.row').find(".t_val");
        if ($valueInput.val() == 'like') {
            el.find('input').remove();
            el.append("<input type='number' class='some-other-class'>");      
        } else if ($valueInput.val() == 'range') {
            el.find('input').remove();
            el.append("<input type='number' class='some-other-class'>");
        } else {
            el.find('input').remove();
            el.append("<input type='number' class='some-other-class'>");
        }
    });
}

changeValueInput();

工作示例：https://jsfiddle.net/ebdg3q71/2/

你也可以这样写：

var changeValueInput = function () {
    var $valueInput = $("select[name=t_rel]");

    $valueInput.change(function () {
        var el = $(this).parents('.row').find(".t_val");
        if ($valueInput.val() == 'like') {
            el.html('');
            el.html("<input type='number' class='some-other-class'>");
        } else if ($valueInput.val() == 'range') {
            el.html('');
            el.html("<input type='number' class='some-other-class'>");
        } else {
            el.html('');
            el.html("<input type='number' class='some-other-class'>");
        }
    });
}

changeValueInput();

工作示例：https://jsfiddle.net/ebdg3q71/3/

Answer 2

试试这个：

$('select[name="t_rel"]').change(function(){
            var selectedVal = $(this).val();
            console.log(selectedVal);

            $('.t_val').html('').html('<input type="password" class="form-control" value="">');
        });

每次更改下拉选项时，此代码都会将输入文本更改为密码。提出你的条件并使用它。

Answer 3

您可以这样使用：

$(document).ready(function(){

$("select[name=t_rel]").on("change",function(){

    $value = $(this).val();
    $input = $(".col-md-5 input");

    if($value == 'like')
        $input.removeAttr("class").attr({type:"number",class:"some-other-class"});

    else if ($value == 'range') 
        $input.removeAttr("class").attr({type:"password",class:"some-other-class"});

    else 
        $input.removeAttr("class").attr({type:"email",class:"some-other-class"}); 

    })
})

最终代码：

＆＃13;

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
       <div id="query_template" class="hide">
    <div class="col-md-12 query_row">
        <div class="row">
            <div class="col-md-3">
                <select name="t_col" class="form-control">
                    <option value="1">Col 1</option>
                    <option value="1">Col 2</option>
                    <option value="1">Col 3</option>
                    <option value="1">Col 4</option>
                    <option value="1">Col 5</option>
                    <option value="1">Col 6</option>
                </select>
            </div>
            
            <div class="col-md-3">
                <select name="t_rel" class="form-control">
                    <option value="equal">=</option>
                    <option value="greater_than">></option>
                    <option value="less_than"><</option>
                    <option value="like">LIKE</option>
                    <option value="range">RANGE</option>
                </select>
            </div>
            
            <div class="col-md-5 t_val">
                <input type="text" class="form-control" value="">
            </div>
            
            
            <div class="col-md-1">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn row-plus btn-primary">
                        <a href="#" name="plus">+</a>
                    </label>
                    <label class="btn row-minus btn-primary">
                        <a href="#" name="minus">-</a>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>

        $(document).ready(function(){

        $("select[name=t_rel]").on("change",function(){

            $value = $(this).val();
            $input = $(".col-md-5 input");

            if($value == 'like')
                $input.removeAttr("class").attr({type:"number",class:"some-other-class"});

            else if ($value == 'range') 
                $input.removeAttr("class").attr({type:"password",class:"some-other-class"});

            else 
                $input.removeAttr("class").attr({type:"email",class:"some-other-class"}); 

        })

        })
                           

        </script>
    </body>
</html>

＆＃13;

jQuery - 根据选择值更改输入类型

3 个答案: