Question

我在表格的一行中选择了选项。这是html表

<td>
 <select id="itemClean" class="form-control" name="item">
    <option value="01">Certificate</option>
    <option value="02">Interior</option>
    <option value="03">Exterior</option>
    <option value="04">Foreign Marking</option>
 </select>
</td>

<td>
   <input id="remarks" class="form-control" type="text" name="remarks" placeholder="Describe it..">
</td>

我的情况是，如果选择的选项是内部，我想更改具有文本输入#remarks的下一列以选择选项。我怎样才能成真。？

这是我的jquery代码

/*Handling cleaning interior */
    $(document).on("change", "#itemClean", function () {
        var selected = $('#itemClean option:selected').text();
        var tr = $(this).closest("tr");
        var remarks = tr.find("#remarks").val();

        if (selected === "Interior") {
            var selRemarksCleaning = '<select class="form-control" name="remarksCleanig" id="remarksCleanig">';
            $.each(<?php echo json_encode($interior_cleaning_item); ?>, function (i, elem) {
                selRemarksCleaning += '<option value = ' + elem.NAMA_CLEAN_ITEM + '>' + elem.NAMA_CLEAN_ITEM + '</option>';
            });
            selRemarksCleaning += '</select>';

            //CHANGE THE INPUT TO THIS SELECT OPTION
        } else {

        }
    });

任何帮助它如此欣赏。

更新感谢您对Mr.先生的快速回复这是基本代码。

function addRowClean() {
    var selItem = '<select class="form-control" name ="item" id="itemClean">';

    $.each(<?php echo json_encode($cleaning_item); ?>, function (i, elem) {
        selItem += '<option value=' + elem.ITEM_ID + '>' + elem.NAMA_ITEM + '</option>';
    });

    selItem += '</select>';

    $("#tableClean").find('tbody').append('<tr><td>' +
            '<span class="label label-success btn-block" id="type">CLEANING</span></td><td>' + selItem +

       //BASED YOUR SUGGESTION
            '</td><td><input class="form-control remarks" type="text" name="remarks" placeholder="Describe it.." /><select class="form-control remarksCleanig" name="remarksCleanig"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>' +

            '</td><td><button id="btnclean" class="btn btn-block btn-primary" type="button" data-toggle="toggle"><i class="fa fa-plus"></i></button>' +

            '</td><td><button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash-o"></button>' +
            '</td></tr>');
    $(".time").inputmask("hh:mm");
}

结果是，输入和选择选项都显示。再次感谢

Answer 1

首先，给定您的JS代码，您会看到多个元素具有相同的id属性，这些属性无效。使用类对多个公共元素进行分组。

其次，根据选项，在您的HTML中同时拥有select和input并简单地hide() / show()相关的内容会简单得多从父select中选择。试试这个：

<td>
    <select class="form-control itemClean" name="item">
        <option value="01">Certificate</option>
        <option value="02">Interior</option>
        <option value="03">Exterior</option>
        <option value="04">Foreign Marking</option>
    </select>
</td>

<td>
    <input class="form-control remarks" type="text" name="remarks" placeholder="Describe it.." />
    <select class="form-control remarksCleanig" name="remarksCleanig">
        <!-- populate this from your $interior_cleaning_item PHP variable... -->
    </select>
</td>

.remarks {
    display: block;
}
.remarksCleanig {
    display: none;
}

$(document).on("change", ".itemClean", function () {
    var selected = $(this).find'option:selected').text();
    var $tr = $(this).closest("tr");
    var remarks = $tr.find(".remarks").val();
    $tr.find('.remarks').toggle(selected != 'Interior');
    $tr.find('.remarksCleanig ').toggle(selected == 'Interior');
});

Example fiddle

Answer 2

尝试：

    $(document).on("change",  'select[name="item"]', function () {
            var selected = $(this).find('option:selected').text();
            var tr = $(this).closest("tr");
            var remarks = tr.find("#remarks").val();

            if (selected === "Interior") {
                var selRemarksCleaning = '<select class="form-control" name="remarksCleanig" id="remarksCleanig">';
                $.each(<?php echo json_encode($interior_cleaning_item); ?>, function (i, elem) {
                    selRemarksCleaning += '<option value = ' + elem.NAMA_CLEAN_ITEM + '>' + elem.NAMA_CLEAN_ITEM + '</option>';
                });
                selRemarksCleaning += '</select>';

                tr.append($(selRemarksCleaning) );//add the select option
                tr.find("#remarks").hide();//hide the input field
            } else {
tr.find("#remarks").show();
                $('select[name="remarksCleanig"]').remove();
            }
        });

的jsfiddle：https://jsfiddle.net/4oxbx7oz/1/

更改输入文本以选择带有jquery的选项

2 个答案: