Dificuldades no Dropdwn com Jquery

08/04/2018

0

<!--AKI COMEÇA OA FILTRO -->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div class="menu">
                <div class="panel panel-default ">
                    <div class="panel-heading">
                        <h3 class="panel-title">Filtro</h3>
                    </div>
                </div>
                <!--AKI COMEÇA OS BOTÕES -->
                <div class="row-fluid" id="btn-item">
                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle" type="button" id="button-item" data-toggle="dropdown">
                                Modelo
                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu" role="menu">

                                <li role="presentation ">
                                    <a href="#" role="menuitem" class="item-select" value="U900">U900</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="U950">U950</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="U1500">U1500</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="U2500">U2500</a>
                                </li>
                            </ul>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle" type="button" id="button-item1" data-toggle="dropdown">
                                Fornecedor
                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu" role="menu">

                                <li role="presentation ">
                                    <a href="#" role="menuitem" class="item-select" value="Parceiro">Parceiro</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="Empresa">Empresa</a>
                                </li>
                            </ul>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle" type="button" id="button-item2" data-toggle="dropdown">
                                Status chamado
                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu" role="menu">

                                <li role="presentation ">
                                    <a href="#" role="menuitem" class="item-select" value="Aberto">Aberto</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="Pendente">Pendente</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="Fechado">Fechado</a>
                                </li>
                            </ul>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle" type="button" id="button-item3" data-toggle="dropdown">
                                Número de série
                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu" role="menu">

                                <li role="presentation ">
                                    <a href="#" role="menuitem" class="item-select" value="1AD">1AD</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="1AC">1AC</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem" class="item-select" value="4AD">4AD</a>
                                </li>
                            </ul>
                        </div>
                </div>
                <!--AKI ENCERRA OS BOTÕES -->
            </div>
        </div>
    </div>
</div>

</div>

<br>

<div class="row">
    {%for maquina in lista %}
    <div class="col-md-4">
        <div class="thumbnail">
            <a href="{% url ''''''''''''''''perfil_maquina'''''''''''''''' pk=maquina.pk %}">
                <img src="{{maquina.foto_capa.url}}" style="width:130%">
                <div align="center">
                    <div class="caption">
                        <p class="">{{maquina.modelo}} - {{maquina.num_serie}} - {{maquina.patrimonio}}</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    {% endfor %}
</div>
<div class="pagination">
    <span class="step-links">
        {% if lista.has_previous %}
            <a href="?page={{ lista.previous_page_number }}">anterior</a>
        {% endif %}
<span class="current"> Página {{ lista.number }} de {{ lista.paginator.num_pages }}. </span> {% if lista.has_next %} <a href="?page={{ lista.next_page_number }}">proxima</a> {% endif %} </span> </div> <script> $(document).ready(function(){ $(".item-select").click(function(){ $(".btn-default''").html(""); $(".btn-default").append($(this).attr("value")); }); }); </script>
Caubi Junior

Caubi Junior

Responder

Post mais votado

09/04/2018

Fala meu querido, tudo bem?

Para poder te ajudar melhor, poderia descrever melhor o problema que está encontrando?

Vinicius Oliveira

Vinicius Oliveira
Responder

Mais Posts

10/04/2018

Caubi Junior


Tenho 4 buttons dropdown com opções selecionáveis no menu dentro das <li>. Estou com dificuldade neste meu dropdown, quero que quando eu clicar nas opções da <li> ele ocupe o lugar do valor do <button>, eu consegui fazer porém ele altera de todos os 4. Como posso fazer esse ajuste no meu script Jquery para que ele altere somente o button selecionado ?

<script>
 
$(document).ready(function(){
     $(".item-select").click(function(){
         $(".btn-default''").html("");
         $(".btn-default").append($(this).attr("value"));
     });
});
 
</script>
Responder

25/07/2018

Elias Ribeiro

Cara utiliza parentesco de classe, que vai resolver o seu problema de clicar em uma e aparecer as 4 clicadas
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar