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

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

JavaScript

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>上面是我的聯系方式表格中的表格。用戶可以通過單擊“+”鏈接輸入任意數量的聯系人，并通過單擊“-”鏈接刪除。但為了驗證數據，我需要根據各自選擇框（組合框）中的選擇更改輸入字段的“類型”。有沒有辦法使用 JQuery 做到這一點？示例：如果我在選擇框中選擇電子郵件，則與此選擇框相對應的輸入字段類型應更改為電子郵件類型。

查看完整描述

1 回答

弒天下

TA貢獻1818條經驗獲得超8個贊

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

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

我冒昧地對您的代碼進行了一些重構，以創建一些有助于代碼重復的方法。我還將+和-鏈接按鈕移動到表格的標題，因為沒有理由將它們附加到第一個聯系人。

下面是一個工作片段。

// mapping object from <select> values to input types

const selectTypesMapping = {

Mobile: 'number',

Landline: 'password',

Email: 'email'

};

// gets a label cell

const getLabelCell = (index) => (`

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

}

<td colspan="4">CONTACT DETAILS</td>

</tr>

</table>

反對回復 2022-10-21

1 回答
0 關注
123 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答

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

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