第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何使用選擇框中的值更改輸入框的類型？

如何使用選擇框中的值更改輸入框的類型？

HUWWW 2022-10-21 17:39:01
 $(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>上面是我的聯(lián)系方式表格中的表格。用戶可以通過單擊“+”鏈接輸入任意數(shù)量的聯(lián)系人，并通過單擊“-”鏈接刪除。但為了驗(yàn)證數(shù)據(jù)，我需要根據(jù)各自選擇框（組合框）中的選擇更改輸入字段的“類型”。有沒有辦法使用 JQuery 做到這一點(diǎn)？示例：如果我在選擇框中選擇電子郵件，則與此選擇框相對(duì)應(yīng)的輸入字段類型應(yīng)更改為電子郵件類型。
查看完整描述

1 回答

?
弒天下

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊

為了實(shí)現(xiàn)您的要求，想法是，在創(chuàng)建新行時(shí)，您需要將更改事件偵聽器附加到您的<select>元素，當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)，事件回調(diào)將<input>使用 jQuery 的attr( )方法。

您還需要在選項(xiàng)值和您可以在此處找到的實(shí)際 HTML 輸入類型之間創(chuàng)建某種映射。

我冒昧地對(duì)您的代碼進(jìn)行了一些重構(gòu)，以創(chuàng)建一些有助于代碼重復(fù)的方法。我還將+和-鏈接按鈕移動(dòng)到表格的標(biāo)題，因?yàn)闆]有理由將它們附加到第一個(gè)聯(lián)系人。

下面是一個(gè)工作片段。

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


查看完整回答
反對(duì) 回復(fù) 2022-10-21
  • 1 回答
  • 0 關(guān)注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)