選擇定義選項時將 select 轉換為輸入

Question

我希望 select 語句中的特定選項在選擇時轉換為輸入，因為它意味着 function 作為一種“其他”，以允許用戶輸入自定義文本。 這是我到目前為止所擁有的：

HTML（如果選擇，我希望最后一個值為 0 的選項被轉換）：

<select class="text-muted mt-4 text-muted" style="position:absolute;font-size:85%;left:16px;top:16px;border:#CCCCCC 1px"  id="taskLabel" placeholder="Choose Tasklist...">
         <?php 
           $tasklists = $db->query('select id,name from tasklist where deleted = 0 AND userid = 0 OR userid = (select id from user where email = ? order by userid desc,name)',$_SESSION['email'])->fetchAll();
           foreach ($tasklists as $list)
           {
             echo '<option class="small" name="'.$list['name'].'" value="'.$list['id'].'">'.ucfirst($list['name']).'</option>';
           }
           ?>
          <option style="border-bottom:1px dashed #CCCCCC;margin-bottom:1px"></option>
          <option class="small" id="addNewTasklist" name="add_new" value="0">Add new tasklist</option>
        </select>

JS：

if (("#taskLabel").children("option:selected").val() == "0")
        {
          $("#addNewTasklist").replaceWIth('<input name="newTasklist id="newTasklist">');
        }

任何幫助我指出正確的方向將不勝感激！

Answer 1

通過以下 JS 更改，我能夠成功地解決這個問題：

$("#taskLabel").change(function(){
    if($("#addNewTasklist").prop("selected",true))
    {
        $("select#taskLabel").replaceWith('<input name="newTasklist" id="newTasklist" placeholder="Add New Tasklist"><i class="fas fa-times tasklist-remove-icon text-muted"></i>');
    }

如果需要，我添加了一個“x”圖標以恢復為 select：

$(document).on('click', '.tasklist-remove-icon', function(){
     $('.tasklist-remove-icon').remove();
     $("input#newTasklist").replaceWith('<select class="text-muted mt-4 text-muted" id="taskLabel" placeholder="Choose Tasklist..."><?php $tasklists = $db->query('select id,name from tasklist where deleted = 0 AND userid = 0 OR userid = (select id from user where email = ? order by userid desc,name)',$_SESSION['email'])->fetchAll();
           foreach ($tasklists as $list)
           {
             echo '<option class="small" name="'.$list['name'].'" value="'.$list['id'].'">'.ucfirst($list['name']).'</option>';
           }
           ?></select>');
        });