在文档加载和如果选择选项更改替换“选择文本”

时间:2013-01-21 10:01:45

标签: javascript jquery select onchange onload

我有一个客户想要有多个分发点,1位于东海岸,1位位于西海岸

我使用的电子商务解决方案不支持此功能。我想通过使用邮政编码作为密钥的货船提供多种运输选项来解决问题。

我使用了一些jQuery来更改“运送选项”以反映分发位置。

这个想法有效,但我的弱点是jquery,如果用户第二次更改发货选项,则选项默认返回原始电子商务默认选项。

到目前为止的代码是

jQuery(function($){ 
    var sel = document.getElementById('ShippingOptions');

    for(var i = sel.options.length - 1; i >= 0; i--) {
        if(sel.options[i].value == "-1")
            sel.options[i].text = "Select postage";
        if(sel.options[i].value == "75554")
            sel.options[i].text = "East Coast Distribution";
        if(sel.options[i].value == "75555")
            sel.options[i].text = "West Coast Distribution";

        $('#shippingSpan').text("Select postage");
    }
});

2 个答案:

答案 0 :(得分:1)

请不要混用jQuery和DOM。

动态更改选择并不是一个好主意。 而是有两个选择或隐藏字段,可以使用正确的运输进行更新。

更改分发点的触发器是什么?

为什么这是一个问题?如果用户选择值为75554的选项,那么该文本不是东海岸,如果他选择75555,则该选项的文本不是西海岸吗?

我猜(根据提供的问题和代码)这是你可能想要的:

DEMO

 var shippingOpts = { "75554":"East Coast Distribution", "75555":"West Coast Distribution" }

$(function() {    
  $('#ShippingOptions').on("change",function() {
    var val = $(this).val();
    $('#shippingSpan' ).text(
      (shippingOpts[val]) ? 
       shippingOpts[val] : 
       $("#ShippingOptions option:selected").text()
    );
  });

  // when page loads:
  $('#ShippingOptions').trigger("change");
});

答案 1 :(得分:0)

你可以像这样使用jquery。

    $('#selectorid option:selected').each(function(i, item){
      // $(this).value() to access value 
      // $(this).text() to access text
      // $(this).value(" set value here "); same way for text

      // use if else ladder or switch case 

     });