Question

我希望select语句中的特定选项在被选中时转换为输入，因为它的目的是充当一种“其他”功能，以允许用户输入自定义文本。这是我到目前为止的内容：

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更改，我能够成功解决此问题：

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default function Segment() {
return (
    <StaticQuery
        query={graphql`
            query {
                allSanityProduct(limit:1) {
                    edges {
                        node {
                            productName
                        }
                    }
                }
            }
        `}
        render={data => (
            <header>
                <h1>{data.allSanityProduct.edges.productName}</h1>
            </header>
        )}
    />
)
}

我添加了一个“ x”图标，以便在需要时恢复为选择状态：

$("#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>');
    }

选择定义的选项后，将选择转换为输入

1 个答案: