正文

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

 2023-05-09  40

关键词：

【中文标题】选择定义的选项时将选择转换为输入【英文标题】：Convert select to input when defined option is selected 【发布时间】：2020-12-06 02:56:01 【问题描述】：

我希望选择语句中的特定选项在被选中时转换为输入，因为它的作用是作为一种“其他”来允许用户输入自定义文本。到目前为止，这是我所拥有的：

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">');

任何帮助我指出正确的方向将不胜感激！

【问题讨论】：

您缺少$ 的$("#taskLabel").child... 如果不是复制粘贴到这篇文章中，那应该会在您的浏览器开发工具控制台中引发错误。没有提及您是否检查过错误您不能通过select 中的输入类型="text" 使用replaceWith 选项。您必须使用 input if val() == 0replaceWith 进行整个选择 @charlietfl 这似乎不仅仅是typo 的问题。如果我错了，请纠正我。 @AlwaysHelping 您关于交换输入和选项的观点绝对准确，因此不仅仅是拼写错误。甚至不确定除了在选择上方/下方/旁边显示输入之外，OP 的最佳解决方法是什么。也变成了 XY 问题我添加了 $ 并更改了标签以引用整个选择 ( $("#taskLabel") )，但这并没有解决问题。 【参考方案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”图标以恢复为选择：

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

【讨论】：

如何在intellijidea中禁用“粘贴时将java转换为kotlin”？

...该对话框包含“下次不再询问复选框”。我选中了此框并选择了“是”，但现在我要撤消我的默认选择。我该怎么做呢？我在IntelliJIDEA的首选项中查找并搜索过，但没有找到相应的复选框。它实际上是在设置中，还是我可以以某... 查看详情

选择列表框选项时将行添加到 Data GridView VB.net

】选择列表框选项时将行添加到DataGridViewVB.net【英文标题】：AddrowstoaDataGridViewwhenListboxoptionisselectedVB.net【发布时间】：2015-04-0912:03:23【问题描述】：我希望为我正在开发的网站创建一个选项管理页面。我需要根据在ListBox中选择... 查看详情

在选择选项更改时将子组件中的道具传递给父组件(代码片段)

我有一个选择下拉组件作为子组件，其中选项（类别列表）由父组件中的componentDidMount上的API生成。当用户选择选项（类别）时，必须将选定的值传递回父组件。父组件根据所选值执行get请求，并将结果作为选项（产品列表）传... 查看详情

单击选择中的选项标签时将类添加到祖父母

】单击选择中的选项标签时将类添加到祖父母【英文标题】：AddclasstograndparentwhenanOptiontaginselectisclicked【发布时间】：2019-01-0318:57:22【问题描述】：我有3列，每列都有一个表格的选择。我正在尝试将一个类“单击”到我的div中，... 查看详情

仅为输入字段设置背景颜色选择选项列表

】仅为输入字段设置背景颜色选择选项列表【英文标题】：SetbackgroundcolorforinputfieldonlySelectOptionlist【发布时间】：2013-06-1516:11:11【问题描述】：关于为选择列表设置背景颜色有很多问题，例如。HTML:howtosetbackgroundcolorofiteminselectele... 查看详情

如何以 laravel 刀片形式生成输入选择并自定义其选项值？

】如何以laravel刀片形式生成输入选择并自定义其选项值？【英文标题】：Howtogenerateinputselectinlaravelbladeformandcustomizeitsoptionsvalue?【发布时间】：2015-04-1418:06:12【问题描述】：我正在尝试创建一个laravel表单，该表单具有从来自控制... 查看详情

在选择选项上自定义引导表单控件

】在选择选项上自定义引导表单控件【英文标题】：customizingbootstrapform-controlonselectoption【发布时间】：2019-10-1318:48:37【问题描述】：我正在使用引导程序的表单控件类来保持表单输入和需要选择选项的表单输入之间的风格一致... 查看详情

excel表格中怎样把19910108数字转换成日期？

...格，然后输入好内容并选中。2、在上方”数据“菜单中选择”分列“选项。3、打开对话框后，选择分隔符号然后点击下一步。4、之后数据格式选择”日期“点击完成。5、完成之后数字就转换为日期了，接着还可以右键单击，... 查看详情

EXTJS - 删除选择列的选项

】EXTJS-删除选择列的选项【英文标题】：EXTJS-removeoptiontoselectcolumns【发布时间】：2012-10-2310:29:24【问题描述】：如何删除在我的extjs网格中选择列的选项：【问题讨论】：【参考方案1】：尝试设置属性enableColumnHide:false参考：docs... 查看详情

使用选择选项标签动态添加输入字段

】使用选择选项标签动态添加输入字段【英文标题】：Dynamicallyaddinputfieldwithselectoptiontag【发布时间】：2018-07-2521:01:36【问题描述】：我正在尝试使用jQuery代码为用户生成简历。我正在尝试的是，用户单击选择标签并选择一年经... 查看详情

word定义多级列表

1、单击开始选项卡里的多级列表按钮，在下拉列表中选择定义新的多级列表2、先设置第一级编号，选择阿拉伯数字1,2,3，...,并在自动编号“1”的左右分别输入“第”“章”，级别链接到样式选择标题一3、设置第二级编号，将... 查看详情

选择选项上的输入类型文件

】选择选项上的输入类型文件【英文标题】：Inputtypefileonselectoption【发布时间】：2016-11-3007:46:27【问题描述】：有没有办法例如使用引导程序来放置一个inputtype="file"对于select字段中的每个option？这样我就可以为每个选项选择一... 查看详情

ASP.NET 从下拉列表中选择选项时添加数字/文本输入模式

】ASP.NET从下拉列表中选择选项时添加数字/文本输入模式【英文标题】：ASP.NETAddanumber/textinputmodalwhenselectinganoptionfromadropdownlist【发布时间】：2021-07-2323:19:23【问题描述】：所以我试图弄清楚如何从ASP.net的下拉列表中选择一个选... 查看详情

科学记数法如何批量转换成正常的文本或者数字

...组大于11的数字，可以看到显示了科学的计数方法。二、选择要转换的单元格，单击鼠标右键，然后选择“设置单元格格式”。三、在“打开设置”窗口中单击“自定义”，然后选择类型“0”。四、单击“确定”可将选定的数据... 查看详情

在 iOS 7 WebView 上的 HTML 输入控件中选择文本时如何删除或禁用“定义”选项？

】在iOS7WebView上的HTML输入控件中选择文本时如何删除或禁用“定义”选项？【英文标题】：Howtoremoveordisable"Define"optionwhenselectingtextinanHTMLinputcontrolonaniOS7WebView?【发布时间】：2014-01-1422:55:23【问题描述】：我有一个简单的... 查看详情

excel表格输入时间是斜杠的格式怎么转换成横杠的格式

...下图，选中单元格。2、点击鼠标右键，在弹出的选项中选择“设置单元格格式”。3、在弹出的对话框中选择“自定义”，并手动更改类型为：yyyy-m-d。4、点击确定，即可将选中的单元格内的斜杠日期格式更改为横杠日期格式了... 查看详情

excel表格自定义格式的日期怎么改成文本格式的日期？

...后点击【fx】按钮。3.弹出【插入函数】对话框：在【或选择类别】中选择[全部]选项；在【选择函数】中选择函数[TEXT]，这个函数根据指定的数值格式将数字转成文本，然后点击【确定】按钮。4.弹出【函数参数】对话框：将光... 查看详情

将下拉选择输入转换为需要选择一个的单选按钮

】将下拉选择输入转换为需要选择一个的单选按钮【英文标题】：Convertingdrop-downselectinputtoradiobuttonswhichrequireonetobechosen【发布时间】：2010-12-2101:47:25【问题描述】：我正在使用电子商务系统，该系统允许您为每种产品提供多种变... 查看详情

正文