OBJETIVO: tener un cuadro de entrada, donde un valor que puede ser escrito, a continuación, a la derecha del cuadro de entrada es un arranque botón de la lista desplegable donde puede seleccionar «Nombre de la Tienda, Ciudad, Estado o código Postal».

Que tendría que escribir en nombre de (decir Walmart) y, a continuación, seleccione el Nombre de la Tienda. Cuando se seleccione el Nombre de la Tienda presentará el formulario y enviar dos correos valores para ser manejado por php:

término de búsqueda | búsqueda de tipo

Este es el código que tengo para el botón:

<form name="searchForm" id="searchForm" method="POST" />
      <div class="input-append">
        <input class="span2" id="appendedInputButton" type="text">
        <div class="btn-group">
          <button class="btn dropdown-toggle" data-toggle="dropdown">
            Action
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li>Search Store Names</li>
            <li>Search City</li>
            <li>Search State</li>
            <li>Search Zip Code</li>
          </ul>
        </div>
      </div>
    </form>

OriginalEl autor John | 2013-03-26

2 Comentarios

  1. 23
    <form name="searchForm" id="searchForm" method="POST" />
      <div class="input-append">
        <input class="span2" id="appendedInputButton" name="search_term" type="text">
        <input class="span2" id="search_type" name="search_type" type="hidden">
        <div class="btn-group">
          <button class="btn dropdown-toggle" data-toggle="dropdown">
            Action
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li onclick="$('#search_type').val('store'); $('#searchForm').submit()">Search Store Names</li>
            <li onclick="$('#search_type').val('city'); $('#searchForm').submit()">Search City</li>
            <li onclick="$('#search_type').val('state'); $('#searchForm').submit()">Search State</li>
            <li onclick="$('#search_type').val('zip'); $('#searchForm').submit()">Search Zip Code</li>
          </ul>
        </div>
      </div>
    </form>

    $_POST['search_term'] será el texto escrito y $_POST['search_type'] será uno de store, city, state, o zip.

    Esta es una solución maravillosa. Muchas gracias. Extraño cómo Bootstrap utiliza de entrada / desplegable, botones de envío, pero encontrar una solución para capturar el valor es tan difícil. Gracias Michael. Oh, también… al menos para mí, que he perdido el hover-efecto con esta solución (vs hipervinculación con los elementos de la lista. He añadido esto a mi aplicación. De lo contrario, hizo exactamente lo que usted escribió. Thx grande.

    OriginalEl autor MichaelRushton

  2. 5

    Para un puro html y css solución, intente esto:

    <li>
      <input type="submit" class="form-control btn btn-link" name="submit" value="Search State">
    </li>

    CSS:

    .dropdown input {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
        height: 26px;
    }
    
    .dropdown .btn-link:hover {
        text-decoration: none;
        background-color: #e8e8e8;
    }
    cambio .dropdown a dropdown-menu a afectar a la clase. solución agradable gracias cargas

    OriginalEl autor Brent Sandstrom

Dejar respuesta

Please enter your comment!
Please enter your name here