如何使用选择框中的值更改输入框的类型？

Question

 $(function() {     var index = 1;     $("#addcon").on("click", function() {          num = index + 1;        $("table.contact").append(`            <tr>                <td class='label'><label class='required'>Contact ${num}</label></td>                <td>:</td>                <td><select name=contact[${index}][type] class='contact' required>                    <option style='display: none;' value='' selected>Select Type</option>                    <option>Mobile</option>                    <option>Landline</option>                    <option>Email</option>                    <option>Other</option>                </select></td>                <td><input type='text' name=contact[${index}][way] maxlength='300' class='way' required></td>            </tr>        `);        index++;    });         $("#remcon").on("click", function() {          if(index - 1 >= 1) {            $("table.contact tr").last().remove();            index--;        }        else {              alert("One is must!");        }    });  });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="contact">    <tr class="legend">        <td colspan="6">CONTACT DETAILS</td>    </tr>    <tr>    </tr></table>上面是我的联系方式表格中的表格。用户可以通过单击“+”链接输入任意数量的联系人，并通过单击“-”链接删除。但为了验证数据，我需要根据各自选择框（组合框）中的选择更改输入字段的“类型”。有没有办法使用 JQuery 做到这一点？示例：如果我在选择框中选择电子邮件，则与此选择框相对应的输入字段类型应更改为电子邮件类型。

Answer 1

为了实现您的要求，想法是，在创建新行时，您需要将更改事件侦听器附加到您的<select>元素，当用户选择一个选项时，事件回调将<input>使用 jQuery 的attr( )方法。

您还需要在选项值和您可以在此处找到的实际 HTML 输入类型之间创建某种映射。

我冒昧地对您的代码进行了一些重构，以创建一些有助于代码重复的方法。我还将+和-链接按钮移动到表格的标题，因为没有理由将它们附加到第一个联系人。

下面是一个工作片段。

// mapping object from <select> values to input types

const selectTypesMapping = {

    Mobile: 'number',

    Landline: 'password',

    Email: 'email'

};

// gets a label cell

const getLabelCell = (index) => (`

    <td class="label">

        <label class="required">Contact ${index}</label>

    </td>

`);

// gets a colon cell

const getColonCell = () => (`<td>:</td>`);

// gets a select cell with a configured ID

const getSelectCell = (index) => (`

    <td>

        <select id="select-${index}" name="contact[index][type]"

                class="contact" required>

            <option style="display: none;" value="" selected>Select Type</option>

            <option>Mobile</option>

            <option>Landline</option>

            <option>Email</option>

            <option>Other</option>

        </select>

    </td>

`);

// gets an input cell with a configured ID

const getInputCell = (index) => (`

    <td>

        <input id="input-${index}" type="text" name="contact[index][way]" 

               maxlength="300" class="way" required />

    </td>

`);

// appends a row to a jQuery table and adds the change event to the select

const appendRow = (jQueryTable, index) => {

    jQueryTable.append(`

        <tr>

            ${getLabelCell(index + 1)}

            ${getColonCell()}

            ${getSelectCell(index)}

            ${getInputCell(index)}

        </tr>

    `);

    $(`#select-${index}`).change((event) => {

        $(`#input-${index}`).attr('type', selectTypesMapping[event.target.value]);

    });

};

$(function() {

    // manually append 1st row

    appendRow($('table.contact'), 0);

    let index = 1;

    $('#addcon').on('click', function() {

        // append on click and increment index

        appendRow($('table.contact'), index++);

    });

    $('#remcon').on('click', function() {

        if (index > 1) {

            $('table.contact tr').last().remove();

            index--;

        }

        else {

            alert('At least one contact is required!');

        }

    });

});

.click {

    cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="contact">

    <tr class="legend">

        <td colspan="4">CONTACT DETAILS</td>

        <td style="text-align:left;"><a id="addcon" class="click">+</a></td>

        <td><a id="remcon" title="Add" class="click">-</a></td>

    </tr>

</table>