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

以上是我的 table 联系方式表格。用户可以通过单击“+”link 输入任意数量的联系人，并通过单击“-”link 删除。但是为了验证数据，我需要根据相应 select 框（组合框）中的 selection 更改输入字段的 'type'。有什么方法可以使用 JQuery?

示例： 如果我 select 在 select 框中发送电子邮件，则对应于此 select 框的输入字段类型应更改为输入电子邮件。

Answer 1

为了达到你的要求，想法是，当创建一个新行时，你需要附加一个 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() 方法。

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

我冒昧地对您的代码进行了一些重构，以创建一些有助于代码重复的方法。我还将 + 和 - link 按钮移动到 table 的 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>

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

How can I change type of the input box using values from select box?

html

javascript

jquery

contact-form