JQuery: Dropdown Value is Not Changed using .val() function

Question

I encounter a very strange issue here.

I have two select fields that will output show same result if one of them changes selected value.

Here's the code:

    var qlt,internalQ;

    if (jQuery("#qlt").length>0){
                qlt =       (jQuery("#qlt").val()).split(":")[0];   
                qltDesc =   (jQuery("#qlt").val()).split(":")[1]; 
            }

    if (jQuery("#internalQ").length>0){
                internalQ = (jQuery("#internalQ").val()).split(":")[0];     
                qltDesc =   (jQuery("#internalQ").val()).split(":")[1]; 
            }

    <?php if(is_single('booklets')) { ?> 
    jQuery('#qlt').change(function(){ 
        if  (qlt=="4-1")                {   jQuery('#internalQ').val('4-1:Matt 90gsm');         }
            else if(qlt=="4-2")         {   jQuery('#internalQ').val('4-2:Silk/matt 128gsm');   }
            else if(qlt=="4-3")         {   jQuery('#internalQ').val('4-3:Silk/Matt 150gsm');   }
            calculate();
        }); 

        jQuery('#internalQ').change(function(){ 
            if  (internalQ=="4-1")      {   jQuery('#qlt').val('4-1:Matt 90gsm');               }
            else if(internalQ=="4-2")   {   jQuery('#qlt').val('4-2:Silk/matt 128gsm');         }
            else if(internalQ=="4-3")   {   jQuery('#qlt').val('4-3:Silk/Matt 150gsm');         }
            calculate();
        }); 
    <?php } ?>

The problem is the last conditions of each JQuery.change function (else if(internalQ=="4-3" and else if(qlt=="4-3")) does not work as expected. The value will change back to the first option, NOt the third.

If my description is not clear, my current page is: http://210.48.94.218/~printabl/products/booklets/

The fields I'm talking about are Cover Quality and Internal Quality

Q: Did I miss something here? Can you point it out? Any help will be greatly appreciated.

oh, i forgot to put them, they are instantiated in my codes sorry. Let me edit my post — Jed
– Jed, Commented Jul 3, 2013 at 2:29
@elclanrs: I edit already my post. Can you help me figure this out? — Jed
– Jed, Commented Jul 3, 2013 at 2:37
You are statically setting qlt and internalQ to the initial value. Don't you want to set them dynamically inside your jQuery().change(function(){});? — Sean
– Sean, Commented Jul 3, 2013 at 2:55
Don't the two change() conditions create an endless loop? If #qlt element changes, change #internalQ which triggers the onchange for #internalQ and changes #qlt, ad infinitum. Recommend putting a bunch of console.log() statements in there for examination/debugging. — Paul
– Paul, Commented Jul 3, 2013 at 3:12

isThisLove · Accepted Answer · 2013-07-03 03:08:34Z

1

jQuery('#qlt').change(function(){
   var qlt = jQuery(this).val().split(":")[0];
   if(qlt.length > 0){
      //do your if else here
   }
)};

Do the same for #internalQ.

If you don't want to check the length each time, just avoid the if statment in the function

answered Jul 3, 2013 at 3:08

isThisLove

2692 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jed Over a year ago

Thanks you. Its kinda the same with Sean's answer. I really appreciate your answer. The only thing qlt is needed to be global.

Sean · Accepted Answer · 2013-07-03 03:09:08Z

1

I think the issue stems from you setting qlt and internalQ statically outside your jQuery().change(function(){});

Try setting the values inside -

var qlt,internalQ;

jQuery('#qlt').change(function(){ 

    qlt =  (jQuery(this).val()).split(":")[0];  // set the value of qlt

    if(qlt=="4-1"){   
       jQuery('#internalQ').val('4-1:Matt 90gsm');
    }
    else if(qlt=="4-2"){
       jQuery('#internalQ').val('4-2:Silk/matt 128gsm');
    }
    else if(qlt=="4-3"){
       jQuery('#internalQ').val('4-3:Silk/Matt 150gsm');
    }
        calculate();
    }); 

jQuery('#internalQ').change(function(){

   internalQ = (jQuery(this).val()).split(":")[0]; // set the value of internalQ    

   if(internalQ=="4-1"){   
      jQuery('#qlt').val('4-1:Matt 90gsm');
   }
   else if(internalQ=="4-2"){   
      jQuery('#qlt').val('4-2:Silk/matt 128gsm');
   }
   else if(internalQ=="4-3"){
      jQuery('#qlt').val('4-3:Silk/Matt 150gsm');
   }
   calculate();
}); 
<?php } ?>

see this jsFiddle example - http://jsfiddle.net/zYg2P/1/

answered Jul 3, 2013 at 3:09

Sean

12.4k3 gold badges31 silver badges49 bronze badges

6 Comments

Jed Over a year ago

I really appreciat your answer. Thank you, I tried your answer but it seems their is confusion happening in my codes. Hmmm. How can easily find the error in my codes.

Jed Over a year ago

I tried also to use else in the last condition of each block. But the results are still wrong. :( I guess I need to spend more time searching the error in my codes

Sean Over a year ago

the js you posted in your question is not the js that is in your page. Take a look at this jsFiddle - jsfiddle.net/Ttd6d . I copied your source code from 210.48.94.218/~printabl/products/booklets , and using that js does not do what it does on your page. Something else is off/missing. Which <script> link in your page is your js code?

Jed Over a year ago

the $( document ).ready() and the calculate() function which includes lots of operations. ;

Sean Over a year ago

well your script above always sets the other select to the 1st value. Where your live script works for the 1st 2 options, but not the last. So you must have another script somewhere that is doing that.

|

Jed · Accepted Answer · 2013-07-03 05:17:56Z

Guys I already solved the issue. Its my bad actually.

I have a HTML code as default that i used in displaying Cover Quality and Internal Quality:

<tr>                                                                                 
    <td><?php echo"Cover Quality";?></td>   
    <td>
                 <select id="qlt" name="quality">
        <option value="4-1:Matt 90gsm">Matt 90gsm</option>
        <option value="4-2:Silk/matt 128gsm">Silk/Matt 128gsm</option>
        <option value="4-3:Silk/matt 150gsm">Silk/Matt 150gsm</option>
         </select></td>     
</tr>

And I used the jQuery($element).val('$val') to change the default value.

What I'm doing wrong is: in third option in 'Cover and Interal Quality`

else if (internalQ=="4-3") {jQuery('#qlt').val('4-3:Silk/Matt 150gsm'); }

instead of:

else if (internalQ=="4-3") {jQuery('#qlt').val('4-3:Silk/matt 150gsm'); }

The difference is the Capital "M" and Small "m" in the values.

So I changed, the third value in my jQuery Code(or you can change the HTML) so that the value will match exactly like what is in the HTML. Solved! :)

Thanks for the prompt stackoverflow pros who helped and gave some idea. Now I know whats the cause of this issue.

I will change the title so that programmers with the same problem will be directed to this post.

Collectives™ on Stack Overflow

JQuery: Dropdown Value is Not Changed using .val() function

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related