JQuery：使用.val（）函数不会更改下拉值

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.

Answer 1

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.