CODEWITHSUNDEEP
javascriptphpjqueryhtml
benhuragmf_roo
benhuragmf_roo

Reputation: 1

Error Jquery for html

Read before giving the answer

This function does not work. I need equal to this company http://www.redehost.com.br/hospedagem-de-site/planos

When you select the period in case the value of this exchange will be the link and the content of the DIV skype: benhur.augusto

Must change by value or by id?

<select name="select"  sourceindex="0">
<option value="1" >Mensal</option>                    
<option value="3" id="trimestral" >Trimestral (3% de desconto)</option>
<option value="6" id="Semestral" >Semestral (6% de desconto)</option>
<option value="12" >Anual (12% de desconto)
</option>
</select>


<div id="p01" class="price">$3.99 <i>/ por mês</i></div>
<div id="p02" class="price">$3.99 <i>/ por mês</i></div>
<div id="p03" class="price">$3.99 <i>/ por mês</i></div>
<div id="p04" class="price">$3.99 <i>/ por mês</i></div>

<a href="#"  id="l01" class="button orange small colorchan">Comprar Agora</a>
<a href="#"  id="l02" class="button orange small colorchan">Comprar Agora</a>
<a href="#"  id="l03" class="button orange small colorchan">Comprar Agora</a>
<a href="#"  id="l04" class="button orange small colorchan">Comprar Agora</a>


<script type="text/javascript">
$(document).ready(function() {
$("#trimestral").click(function() {
$("#p01").html("R$53.99 <i>/ por mês</i>");
$("#p02").html("R$63.99 <i>/ por mês</i>");
$("#p03").html("R$73.99 <i>/ por mês</i>");
$("#p04").html("R$83.99 <i>/ por mês</i>");
$("#l01").attr("href", "http://www.codigosnaweb.com");
$("#l02").attr("href", "http://www.codigosnaweb.com");
$("#l03").attr("href", "http://www.codigosnaweb.com");
$("#l04").attr("href", "http://www.codigosnaweb.com");
});


$("#semestral").click(function() {
$("#p01").html("R$93.99 <i>/ por mês</i>");
$("#p02").html("R$103.99 <i>/ por mês</i>");
$("#p03").html("R$113.99 <i>/ por mês</i>");
$("#p04").html("R$123.99 <i>/ por mês</i>");
$("#l01").attr("href", "http://www.codigosnaweb.com");
$("#l02").attr("href", "http://www.codigosnaweb.com");
$("#l03").attr("href", "http://www.codigosnaweb.com");
$("#l04").attr("href", "http://www.codigosnaweb.com");
});
});
</script>

Upvotes: 0

Views: 67

Answers (4)

Valentin Mercier
Valentin Mercier

Reputation: 5326

Your best bet is to listen for the change event of your selecttag and then analyse the selected option:

$(document).ready(function() {
    $("select[name=select]").change(function() {
        if ($(this).find("option:selected").attr('id') == "trimestral") {
            $("#p01").html("R$53.99 <i>/ por mês</i>");
            $("#p02").html("R$63.99 <i>/ por mês</i>");
            $("#p03").html("R$73.99 <i>/ por mês</i>");
            $("#p04").html("R$83.99 <i>/ por mês</i>");
            $("#l01").attr("href", "http://www.codigosnaweb.com");
            $("#l02").attr("href", "http://www.codigosnaweb.com");
            $("#l03").attr("href", "http://www.codigosnaweb.com");
            $("#l04").attr("href", "http://www.codigosnaweb.com");
        } else if ($(this).find("option:selected").attr('id') == "Semestral") {

            $("#p01").html("R$93.99 <i>/ por mês</i>");
            $("#p02").html("R$103.99 <i>/ por mês</i>");
            $("#p03").html("R$113.99 <i>/ por mês</i>");
            $("#p04").html("R$123.99 <i>/ por mês</i>");
            $("#l01").attr("href", "http://www.codigosnaweb.com");
            $("#l02").attr("href", "http://www.codigosnaweb.com");
            $("#l03").attr("href", "http://www.codigosnaweb.com");
            $("#l04").attr("href", "http://www.codigosnaweb.com");
        }
});
});

Here is a quick demo for you: http://jsfiddle.net/6XHaG/

Upvotes: 0

Sean
Sean

Reputation: 12433

Use .on('change', on you select (not the .click( on the option), get the option id, then run your code based off the id

<script type="text/javascript">
$(document).ready(function() {
  $('input[name=select]').on('change', function(){
      var optionId = $(this).attr('id');
      if(optionId == 'trimestral'){
        ....
      }
      else if(optionId == 'semestral'){
        ....
      }
   });
});
</script>

Upvotes: 2

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you need to write change event instead of click event for drop-down list:

HTML:

<select name="select" id="dropDown" sourceindex="0">
    <option value="1">Mensal</option>
    <option value="3" id="trimestral">Trimestral (3% de desconto)</option>
    <option value="6" id="Semestral">Semestral (6% de desconto)</option>
    <option value="12">Anual (12% de desconto)</option>
</select>
<div id="p01" class="price">$3.99 <i>/ por mês</i>

</div>
<div id="p02" class="price">$3.99 <i>/ por mês</i>

</div>
<div id="p03" class="price">$3.99 <i>/ por mês</i>

</div>
<div id="p04" class="price">$3.99 <i>/ por mês</i>

</div>
<a href="#" id="l01" class="button orange small colorchan">Comprar Agora</a>

<a href="#" id="l02" class="button orange small colorchan">Comprar Agora</a>

<a href="#" id="l03" class="button orange small colorchan">Comprar Agora</a>

<a href="#" id="l04" class="button orange small colorchan">Comprar Agora</a>

JQUERY:

$(document).ready(function () {
    $("#dropDown").change(function () {
        if ($(this).val() === '3') { // check option selected option value is 3
            $("#p01").html("R$53.99 <i>/ por mês</i>");
            $("#p02").html("R$63.99 <i>/ por mês</i>");
            $("#p03").html("R$73.99 <i>/ por mês</i>");
            $("#p04").html("R$83.99 <i>/ por mês</i>");
            $("#l01").attr("href", "http://www.codigosnaweb.com");
            $("#l02").attr("href", "http://www.codigosnaweb.com");
            $("#l03").attr("href", "http://www.codigosnaweb.com");
            $("#l04").attr("href", "http://www.codigosnaweb.com");
        } else if ($(this).val() === '6') { // check if selected option value is 6
            $("#p01").html("R$93.99 <i>/ por mês</i>");
            $("#p02").html("R$103.99 <i>/ por mês</i>");
            $("#p03").html("R$113.99 <i>/ por mês</i>");
            $("#p04").html("R$123.99 <i>/ por mês</i>");
            $("#l01").attr("href", "http://www.codigosnaweb.com");
            $("#l02").attr("href", "http://www.codigosnaweb.com");
            $("#l03").attr("href", "http://www.codigosnaweb.com");
            $("#l04").attr("href", "http://www.codigosnaweb.com");
        }
    });

DEMO:

http://jsfiddle.net/hf2ZU/

Upvotes: 1

wildhaber
wildhaber

Reputation: 1661

The problem is, that you try to trigger a click on a select-option.

You need to trigger the onchange-event of the select-field like this.

<select name="select"  sourceindex="0" id="idoftheselectfield">
<option value="1" >Mensal</option>                    
<option value="3" id="trimestral" >Trimestral (3% de desconto)</option>
<option value="6" id="Semestral" >Semestral (6% de desconto)</option>
<option value="12" >Anual (12% de desconto)</option>
</select>

jquery:

$("#idoftheselectfield").change(function() {
    var selectValue = $(this).val();
    if(selectValue == "6") {
        // put code for semestral
        $("#p01").html("R$53.99 <i>/ por mês</i>");
        $("#p02").html("R$63.99 <i>/ por mês</i>");
        $("#p03").html("R$73.99 <i>/ por mês</i>");
        $("#p04").html("R$83.99 <i>/ por mês</i>");
        $("#l01").attr("href", "http://www.codigosnaweb.com");
        $("#l02").attr("href", "http://www.codigosnaweb.com");
        $("#l03").attr("href", "http://www.codigosnaweb.com");
        $("#l04").attr("href", "http://www.codigosnaweb.com");

    } else if(selectValue == "3") {
        // put code for trimestral

        $("#p01").html("R$93.99 <i>/ por mês</i>");
        $("#p02").html("R$103.99 <i>/ por mês</i>");
        $("#p03").html("R$113.99 <i>/ por mês</i>");
        $("#p04").html("R$123.99 <i>/ por mês</i>");
        $("#l01").attr("href", "http://www.codigosnaweb.com");
        $("#l02").attr("href", "http://www.codigosnaweb.com");
        $("#l03").attr("href", "http://www.codigosnaweb.com");
        $("#l04").attr("href", "http://www.codigosnaweb.com");
    }
});

Please note, that this is a pretty ugly concept doing what you probably want to achieve. But to your question - this is how you can handle the selection of the select-field.

Upvotes: 1

Related Questions