Question

创建了bootstrap内联搜索表单。

但我需要使用bootstrap类来替换像

这样的下拉菜单

我试过下面的代码

<div class="input-group-btn input-group-select">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="concept">com</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="com">com</a></li>
<li><a href="net">net</a></li>
<li><a href="org">org</a></li>
<li><a href="biz">biz</a></li>
<li><a href="name">name</a></li>
<li><a href="us">us</a></li>
</ul>
<input type="hidden" class="input-group-select-val" name="tld[]['type'][]" value="com">
</div>

INSTEAD OF现有的

<select class="inputbox" name="tld[]">
<option selected="" value="com">com</option>
<option value="net">net</option>
<option value="org">org</option>
<option value="biz">biz</option>
<option value="name">name</option>
<option value="us">us</option>
</select>

但搜索无效

下图将告诉您我需要什么。

imgur.com/XD5QVTE

Answer 1

试试这个：

全屏查看摘要以查看内联的表单。你的问题是当你不需要在表中时，你把所有东西放在一个表中。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<form class="form-inline" name="lookup" method="post" action="#">
<input type="hidden" name="action" value="check_availability">
<input type="hidden" name="showrelated" value="true">

    <div class="form-group">
    <input name="txtDomainName" type="text" class="form-control input-lg" size="24" maxlength="60">
  </div>
  <div class="form-group">
    <select  class="form-control input-lg" name="tld[]">
       <option selected="" value="com">com</option>
<option value="net">net</option>
<option value="org">org</option>
<option value="biz">biz</option>
<option value="name">name</option>
<option value="us">us</option>
<option value="info">info</option>
<option value="in">in</option>
<option value="co.in">co.in</option>
<option value="net.in">net.in</option>
<option value="org.in">org.in</option>
<option value="firm.in">firm.in</option>
<option value="gen.in">gen.in</option>
<option value="ind.in">ind.in</option>
<option value="eu">eu</option>
<option value="mobi">.mobi</option>
<option value="mn">.mn</option>
<option value="bz">.bz</option>
<option value="cc">.cc</option>
<option value="tv">.tv</option>
<option value="eu.com">eu.com</option>
<option value="gb.com">gb.com</option>
<option value="ae.org">ae.org</option>
<option value="kr.com">kr.com</option>
<option value="us.com">us.com</option>
<option value="qc.com">qc.com</option>
<option value="de.com">de.com</option>
<option value="gb.net">gb.net</option>
<option value="no.com">no.com</option>
<option value="hu.com">hu.com</option>
<option value="jpn.com">jpn.com</option>
<option value="uy.com">uy.com</option>
<option value="za.com">za.com</option>
<option value="br.com">br.com</option>
<option value="cn.com">cn.com</option>
<option value="sa.com">sa.com</option>
<option value="se.com">se.com</option>
<option value="se.net">se.net</option>
<option value="uk.com">uk.com</option>
<option value="uk.net">uk.net</option>
<option value="ru.com">ru.com</option>
<option value="ws">ws</option>
<option value="co.uk">co.uk</option>
<option value="org.uk">org.uk</option>
<option value="me.uk">me.uk</option> 
        
      </select>
  </div>
  <button type="submit" class="btn btn-lg btn-success">Search!</button>
    
</form>

Answer 2

我知道这是一个古老的问题，但是如果你还没有找到解决方案的话我会把我的两行放在一边。

两种方法，都需要特定的JS

第一种方法是CSS转换select / option值，这些值不能通过纯CSS完成但需要JS。请使用Bootstrap Select JS。

第二种方式是如何在你提供的bootsnipp中实现它。如果你检查你会看到他有一些javascript将实际隐藏字段输入更改为他从ul标签列表中选择的那个。

Bootstrap内联搜索表单不起作用

2 个答案: