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

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> <td class="label"><label class="required">Contact 1</label></td> <td>:</td> <td><select name="contact[0][type]" required class="contact"> <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[0][way]" required class="way"></td> <td style="text-align:left;"><a id="addcon" class="click">+</a></td> <td><a id="remcon" class="click">-</a></td> </tr> </table>

Above is my table in a contact detail form. User can input any number of contacts by clicking on the "+" link and remove by clicking the "-" link. But in order to validate the data, I need to change the 'type' of the input field as per the selection in the respective select box (combo box). Is there any way to do that using JQuery?

Example: if I select email in select box, the type of input field respective to this select box should change to type email.

Answer 1

To achieve your requirement, the idea is, when creating a new row, you need to attach a change event listener to your <select> element, and when the user selects an option, the event callback will trigger an attribute change on the <input> element using jQuery's attr() method.

You will also need to create some sort of a mapping between the option values and actual HTML input types that you can find here .

I've taken the liberty to refactor your code a little bit to create a few methods that help with code repetition. I've also move the + and - link buttons to the header of the table because there is no reason for them to be attached to the first contact.

Below is a working snippet.

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