如何使用 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>

以上是我的联系方式表格。 用户可以通过单击“+”链接输入任意数量的联系人，并通过单击“-”链接删除。 但为了验证数据，我需要根据各自 select 框（组合框）中的选择更改输入字段的“类型”。 有没有办法使用 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

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

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

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

下面是一个工作片段。

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