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

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 typesconst selectTypesMapping = {&nbsp; &nbsp; Mobile: 'number',&nbsp; &nbsp; Landline: 'password',&nbsp; &nbsp; Email: 'email'};// gets a label cellconst getLabelCell = (index) => (`&nbsp; &nbsp; <td class="label">&nbsp; &nbsp; &nbsp; &nbsp; <label class="required">Contact ${index}</label>&nbsp; &nbsp; </td>`);// gets a colon cellconst getColonCell = () => (`<td>:</td>`);// gets a select cell with a configured IDconst getSelectCell = (index) => (`&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <select id="select-${index}" name="contact[index][type]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="contact" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option style="display: none;" value="" selected>Select Type</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Mobile</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Landline</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Email</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Other</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>`);// gets an input cell with a configured IDconst getInputCell = (index) => (`&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input id="input-${index}" type="text" name="contact[index][way]"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;maxlength="300" class="way" required />&nbsp; &nbsp; </td>`);// appends a row to a jQuery table and adds the change event to the selectconst appendRow = (jQueryTable, index) => {&nbsp; &nbsp; jQueryTable.append(`&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${getLabelCell(index + 1)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${getColonCell()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${getSelectCell(index)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${getInputCell(index)}&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; `);&nbsp; &nbsp; $(`#select-${index}`).change((event) => {&nbsp; &nbsp; &nbsp; &nbsp; $(`#input-${index}`).attr('type', selectTypesMapping[event.target.value]);&nbsp; &nbsp; });};$(function() {&nbsp; &nbsp; // manually append 1st row&nbsp; &nbsp; appendRow($('table.contact'), 0);&nbsp; &nbsp; let index = 1;&nbsp; &nbsp; $('#addcon').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; // append on click and increment index&nbsp; &nbsp; &nbsp; &nbsp; appendRow($('table.contact'), index++);&nbsp; &nbsp; });&nbsp; &nbsp; $('#remcon').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; if (index > 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('table.contact tr').last().remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index--;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('At least one contact is required!');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});.click {&nbsp; &nbsp; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="contact">&nbsp; &nbsp; <tr class="legend">&nbsp; &nbsp; &nbsp; &nbsp; <td colspan="4">CONTACT DETAILS</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="text-align:left;"><a id="addcon" class="click">+</a></td>&nbsp; &nbsp; &nbsp; &nbsp; <td><a id="remcon" title="Add" class="click">-</a></td>&nbsp; &nbsp; </tr></table>