select e mudar imagem

[Thiago Duarte 23]

Oi, gostaria de mudar as categorias do select e mudar as imagens também

 

Quando mudasse o option do select de verde para o amarelo só iria aparecer as divs com as imagens amarela, entendeu? alguém pode ajudar?

 <select name="categoria">
            <option value="img-verde">Verde</option>
            <option value="img-amarela">Amarelho</option>
</select>

<div class="col-md-4 col-sm-6 hero-feature verde">
            <div class="thumbnail panel panel-default">
                <img src="http://static.wix.com/media/93167494884744eca0141334ada89269.jpg" alt="">
                <div class="caption">                                            
                    <p>
                        <a href="#" class="btn-new btn btn-primary">Ver</a> <a href="#" class="btn-new btn btn-success">Editar</a>
                    </p>
                </div>
            </div>
        </div>


        <div class="col-md-4 col-sm-6 hero-feature amarela">
            <div class="thumbnail panel panel-default">
                <img src="http://static.wix.com/media/d8b2ef500c2b4233b9354b1fbd6f8e51.jpg" alt="">
                <div class="caption">
                    <p>
                        <a href="#" class="btn-new btn btn-primary">Ver</a> <a href="#" class="btn-new btn btn-success">Editar</a>
                    </p>
                </div>
            </div>
        </div>

 

[Thiago Duarte 23]

Oi, usei a função change e trocou o texto e não mudou a div inteira

Quando troca o select só aparece escrito "Academias"

Olha como ficou

  <select>

            <option>Academias</option>

            <option>Advogados</option>

  </select>

 <div class="col-md-4 col-sm-6 hero-feature categoria">

            <div class="thumbnail panel panel-default">

                <img src="img/foto1.jpg" alt="">

                <div class="caption">                                            

                    <p>

                        <a href="#" class="btn-new btn btn-primary">Ver</a> <a href="#" class="btn-new btn btn-success">Editar</a>

                    </p>

                </div>

            </div>

        </div>

      <script>

        $( "select" )

        .change(function () {

            var str = "";

            $( "select option:selected" ).each(function() {

              str += $( this ).html() + " ";

          });

            $( ".categoria" ).html( str );

        })

        .change();

        </script>

Alguém pode ajudar?

[Alex Hiroshi 7]

Olá, Thiago Duarte,

 

Que bom que mostrou o código da sua tentativa.

 

Vamos pegar o seu primeiro HTML e tentar aplicar um JS para ele funcionar.

    $('select').change(function(){
        var t = $(this);
        alert(t.val());
    });

Se você executar esse código com o seu primeiro HTML, você vai ter o que? Você terá o valor do 'value' selecionado. Ou seja, img-verde ou img-amarela. Isso já é um grande passo para você tentar fazer outras coisas, já que agora o valor selecionado você já tem.

 

As DIVs que você quer mostrar estão identificadas com uma classe 'única' (amarela e verde). Dá para fazer com essas classes sem nenhum problema, mas como parece que você não está muito familiarizado com o JS, recomendo trocar essas classes pelo mesmo valor dos options, ou seja, img-verde e img-amarela. Assim fica mais fácil para você mostrar a DIV relacionada.

 

Para mostrar é fácil, certo? Use o método show() e para esconder o hide(). Use o valor selecionado junto com esses métodos.

$('.' + t.val()).show();

É só um exemplo simples que você deve tentar melhorar mais.

[Thiago Duarte 23]

Oi amigo, obrigado pela resposta mas não entendi seu exemplo

[romerito 11]

Olá amigo!
Não sei se entendi muito bem o que você esta querendo fazer, mas tente algo mais ou menos assim:

$(function(){
    $("select[name=categoria]").on('change', function () {
	$( "select[name=categoria] option" ).each(function(i, obj) {
	    var clazz = $(obj).val().replace('img-','');
            ($(obj).is(':selected')) ? $('.' + clazz).show() : $('.' + clazz).hide();
	});
    }).trigger('change');
});

espero que ajude, abraço!

[Thiago Duarte 23]

Gostaria que quando o usuario mudasse a categoria do option por exemplo de Verde para Amarelo a div mudasse, entendeu?

 

exemplo meu select ta selecionado o Verde

 <select name="categoria">
            <option value="img-verde" selected>Verde</option>
            <option value="img-amarela">Amarelho</option>
</select>

<div class="col-md-4 col-sm-6 hero-feature categoria">
            Aqui deve ficar o conteudo da div Verde já selecionado
</div>

<div class="col-md-4 col-sm-6 hero-feature categoria">
            Aqui deve ficar o conteudo da div amarelo quando mudar o option do select para o amarelo
</div>

Expliquei direitinho agora ? =)

[Alex Hiroshi 7]

Olá,

 

Qual parte do que eu falei você não entendeu?

[Thiago Duarte 23]

Olá,

 

Qual parte do que eu falei você não entendeu?

 

Não entendi como será feito isso, entendi que hide é pra esconder e show é pra mostrar, mas não sei de que forma vai se encaixar no option

[Alex Hiroshi 7]

Olá,

 

Você fez o teste com o que eu falei?

 

 

Vamos pegar o seu primeiro HTML e tentar aplicar um JS para ele funcionar.

    $('select').change(function(){
        var t = $(this);
        alert(t.val());
    });

Se você executar esse código com o seu primeiro HTML, você vai ter o que? Você terá o valor do 'value' selecionado. Ou seja, img-verde ou img-amarela. Isso já é um grande passo para você tentar fazer outras coisas, já que agora o valor selecionado você já tem.

 

Veja que, ao executar esse script, você terá o value do option selecionado. Se você entendeu que o hide esconde e show mostra, então você pode usar o value selecionado para mostrar e esconder o seu elemento. Faça um teste e retorne com o que você tentou e entendeu.

[Thiago Duarte 23]

Olá,

 

Você fez o teste com o que eu falei?

 

 

Veja que, ao executar esse script, você terá o value do option selecionado. Se você entendeu que o hide esconde e show mostra, então você pode usar o value selecionado para mostrar e esconder o seu elemento. Faça um teste e retorne com o que você tentou e entendeu.

 

Eu sei que ta dando alert, mas não sei pegar o option exato e usar a função show nele e esconder os outros

[Alex Hiroshi 7]

Olá,

 

Ok. Qual a ligação entre um option com a div que você quer esconder?

Você precisa ter uma ligação entre as coisas, ou seja, você tem que saber que, quando selecionar o option 'Amarelo' com o value 'img-amaerla', a div com a classe amarela vai aparecer.

<div class="col-md-4 col-sm-6 hero-feature amarela">...</div>

Como você vê essa ligação?

 

Eu não vejo. Por isso falei na minha primeira resposta:

 

 

recomendo trocar essas classes pelo mesmo valor dos options, ou seja, img-verde e img-amarela

 

Assim você teria uma ligação entre as coisas e poderia fazer dinamicamente um $('.img-amarela').show() (ou .hide()).

[Thiago Duarte 23]

Ta quase lá,

 

como iria exibir e esconder todo o restante?

 

<script>

$('select').change(function(){

var t = $(this);

$('.img-amarela').show();

$('.img-verde').show();

});

</script>

não são 2 options, são mais... coloquei 2 só como exemplo

seria por ex

amarelo, verde, azul, vermelho, etc

[Alex Hiroshi 7]

Olá,

 

Para esconder as outras, é só você pegar um identificador comum dos elementos DIV e mandar esconder com .hide(). O identificador pode ser uma classe comum, por exemplo: todas as DIVs tem a classe "wrapper-images". É só pegar essa classe e esconder.

 

O seu código funciona, mas de uma maneira errada. Você está setando valores na mão, isso não é legal, já que são vários options. Como eu falei, você tem que fazer a coisa mais dinâmica. Se você reparar no alert que eu mostrei lá na primeira resposta, ele mostra exatamente a classe da DIV que você quer mostrar.

alert(t.val()); // img-amarela ou img-verde

Ou seja, você não precisa setar manualmente a DIV que irá aparecer, você vai fazer isso com esse valor que foi exibido no alert.

$('.' + t.val()).show();

Entendeu essa parte? Estou apenas concatenando o ponto, que é o 'identificador' de uma classe, com o valor do option selecionado. Assim sendo, o resuldado seria: $('.img-amarelo').show().

[Thiago Duarte 23]

Assim que vc diz pra ficar?

 

  <script>
            $('select').change(function(){
            var t = $(this);
            $('.' + t.val()).show();
             });
</script>

Não funcionou. Como ficaria o hide dentro desse codigo?

[Alex Hiroshi 7]

Olá,

 

Exatamente. O que aconteceu?

A ideia na hora de usar o hide(): esconda tudo e mostre só o que você precisa.

[Thiago Duarte 23]

Olá,

 

Exatamente. O que aconteceu?

A ideia na hora de usar o hide(): esconda tudo e mostre só o que você precisa.

 

Não funcionou

[Thiago Duarte 23]

https://jsfiddle.net/t42u9z7q/2/

fiz o que vc falou só que depois não volta a sumir rsrs

vê ai

[wanderval 19]

Olha amigo acho que vc fico muito preso ao codigo e executar o codigo, e não esta lendo com muita atenção o que os membros postaram pra ajudar no seu problema, um conselho não fique muito preso somente ao teu codigo analise o que postaram e vai ver não so como funciona mais as varias maneiras de se criar esse mesmo efeito. mas seguindo o que o Lex recomendou pra vc é basicamente dar o hide() com base em uma propriedade comun somente sendo o show especifico.

 

perceba no atributo class a classe "opt" sendo comun entre as 3 divs em seguida no codigo javascript e dado um hide em todas as divs que contenham essa classe "opt" e dado o show somente na qual tem valor selecionado.

<div class="opt verde">verde</div>
<div class="opt amarelo">amarelo</div>
<div class="opt azul">azul</div>

$('.opt').hide();
$('.' + t.val()).show(); 

segue o link com essa alteração com base no que vc já tinha feito https://jsfiddle.net/t42u9z7q/4/