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")）的最后条件不能按预期工作。该值将更改回第一个选项，而不是第三个选项。

如果我的说明不明确，我当前的页面是：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

我认为问题源于您在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

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

我在显示Cover Quality和Internal Quality时使用了默认的HTML代码：

<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专业人士帮助并给出了一些想法。现在我知道这个问题的原因了。

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

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

3 个答案: