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

Question

我在这里遇到一个非常奇怪的问题。

我有两个选择字段，如果其中一个更改选定值，将输出显示相同的结果。

这是代码：

    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 } ?>

问题是每个JQuery.change函数的最后条件（ else if(internalQ=="4-3" ， else if(qlt=="4-3") ）不能按预期工作。该值将更改回第一个选择，NOt第三个。

如果我的描述不清楚，我的当前页面是： http://210.48.94.218/~printabl/products/booklets/ ： http://210.48.94.218/~printabl/products/booklets/

我所谈论的领域是Cover Quality和Internal Quality

问：我在这里错过了什么吗？ 你能指出来吗？ 任何帮助将不胜感激。

Answer 1

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

为#internalQ做同样的事情。

如果您不想每次检查长度，只需避免函数中的if语句

Answer 2

我认为问题源于你在jQuery().change(function(){});之外静态设置qlt和internalQ jQuery().change(function(){});

尝试在里面设置值 -

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 } ?>

看到这个jsFiddle示例 - http://jsfiddle.net/zYg2P/1/

Answer 3

伙计们我已经解决了这个问题。 实际上我很糟糕。

我有一个默认的HTML代码，用于显示Cover Quality和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>

我使用jQuery($element).val('$val')来更改默认值。

我做错了是：在'封面和内部质量'中的第三个选项

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

代替：

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

不同之处在于值中的大写“M”和小“m”。

所以我改变了，我的jQuery代码中的第三个值（或者你可以改变HTML），以便该值与HTML中的值完全匹配。 解决了！ :)

感谢提示stackoverflow专业人士谁帮助并给了一些想法。 现在我知道这个问题的原因是什么。

我将更改标题，以便具有相同问题的程序员将被定向到此帖子。