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