带可编辑组合框的按钮以显示弹出框

我需要可编辑的选择框，以便用户可以手动输入它并从可用选项列表中进行选择。我有什么是下拉按钮里面打开弹出式窗口，但随着这个我也需要手动输入框。带可编辑组合框的按钮以显示弹出框

让我们来看看它的外观

所以现在我只能下拉选择列表和开开弹出，但它不具备可编辑的输入框那里。

我也共享代码和小提琴

<div class="grid-33"> 
       <label class="b-control"> 
       <span class="b-control__label">Source:</span> 
       <span class="b-control__editable"> 
        <select class="b-control__select"> 
        <option value=""></option> 
        <option value="">...</option> 
        <option value="">...</option> 
        <option value="">...</option> 
        </select> 
        <a class="b-control__edit js-control__edit js-popupLink" href="#js-editSelect">...</a> 
       </span> 
       </label> 
      </div>

https://jsfiddle.net/mahendrakawde/o4j3x495/

一起玩。帮助我有可编辑选择这个CSS和JS在小提琴。

来源

2016-01-04 mahendra kawde

您要求在模型窗口中输入的Name和Seq＃的作用是什么？ – Siddharth

名称将被添加到下拉列表中的新选项，seq＃将被自动生成编号。但我不关心它。我只需要输入框元素 –

@Siddharth我只需要在显示弹出框的按钮前面有输入框，其余部分将由js –

队友我尝试了一些使用CSS的东西，但是我不太确定我用过的方法，如果它对你有用的话，那就很好。请看看在fiddle

<input class="edit_text" type="text"/>

和相应的CSS

.edit_text{ 
    cursor: pointer; 
    display: block; 
    height: 34px; 
    position: absolute; 
    top: 35px; 
    width: 246px; 
    z-index: 999; 
}

我已经介绍了外部输入，然后试图覆盖其现有的选择，寻找精细做工精细，现在你可以添加事件输入在选择标签项目搜索和whatnot，基本上你可以做任何你想要的输入标签。

来源

2016-01-04 08:34:38 Siddharth

这不起作用，当我把它添加到整个页面。对于单个元素它确实有效。 –

你可以建议关于可编辑的下拉按钮吗？ –

您需要在将css添加到整个页面时更改css，并且它应该可以工作，只需根据可用情况更改css的顶层元素即可。以及你检查[选择]（https://harvesthq.github.io/chosen/） – Siddharth

带可编辑组合框的按钮以显示弹出框

回答

相关问题