開關元件的類型，但保持相同的ID

我需要改變元素動態類型和下面是如何我這樣做：開關元件的類型，但保持相同的ID

$(function() { 
 
    $('.click_me').click(function(ev) { 
 
    var condition_value_1 = $('#condition_value_1'); 
 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
 
    condition_value_1.after().html(select_html); 
 
    condition_value_1.remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="text" id="condition_value_1"> 
 
<span class="click_me">Click Me</span>

變化後的類型，你在看上面的代碼段我應該刪除前面的元素，但因爲它們共享（並且這是強制性的）相同的ID，所以新的SELECT被刪除。有什麼辦法可以避免這種情況？

來源

2016-11-07 ReynierPM

'他們共享（這是強制性的）相同的ID'爲什麼它是強制性的？這是無效的HTML，當你重複'id'屬性時，JS會引發問題（正如你發現的那樣）。您應該在切換它們時替換每個「輸入」/「選擇」。 –

@RoryMcCrossan不，它不會導致問題，因爲這個想法是將INPUT打開成SELECT並且它是強制性的，因爲如果我更改了值，我可能會涉及更改後端上的許多代碼以使其再次工作 – ReynierPM

使用名稱屬性，而不是ID刪除 –

如果你想更換，你可以使用replaceWith ..

$(function() { 
 
    $('.click_me').click(function(ev) { 
 
    var condition_value_1 = $('#condition_value_1'); 
 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
 
    condition_value_1.replaceWith(select_html); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="text" id="condition_value_1"> 
 
<span class="click_me">Click Me</span>

來源

2016-11-07 13:29:16 Keith

哦這個更好，謝謝 – ReynierPM

是的，你應得的 –

使用name屬性，而不是ID刪除

$(function() { 
    $('.click_me').click(function(ev) { 
    var condition_value_1 = $('#condition_value_1'); 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
    condition_value_1.after().html(select_html); 
    $('[name="ElementNameHere"]')[0].remove(); 
    }); 
});

注意，這將只能刪除搜索DOM時遇到的第一個條目。

來源

2016-11-07 13:31:26

開關元件的類型，但保持相同的ID

回答

相關問題