jquery选择下拉按下数据到标签元素

Question

我有以下选择下拉菜单。我试图找出如何创建一个jquery脚本，它将从选择下拉菜单中选择一个项目时，将选择值中的消息对应到<label class="vfb-desc">，替换Instructions。

<select name="vfb-16" id="vfb-16" class="vfb-select vfb-medium required ">  
    <option value="Select Credit Card type">Select Credit Card type</option> 
    <option value="Visa">Visa</option> 
    <option value="MasterCard">MasterCard</option> 
    <option value="Discover">Discover</option> 
    <option value="America Express">America Express</option> 
    </select> 


<li class="vfb-item vfb-item-instructions " id="item-vfb-37"> 
<label class="vfb-desc"></label> 
</li> 

这是我已经试过：

var newLabel = ''; 
$('#vfb-16').on('change', function(){ 

$('#item-vfb-37 label').text(newLabel); //Change the text before changing the value 
switch(this.value){ 
    case 'Visa': 
     newLabel = 'Interest'; 
     break; 
    case 'MasterCard': 
     newLabel = 'Future value'; 
     break; 
    case 'Discover': 
     newLabel = 'Present value'; 
     break; 
    case 'American Express': 
     newLabel = 'Payment'; 
     break; 
} 

}).trigger('change'); 

<li class="vfb-item vfb-item-instructions " id="item-vfb-37"> 
<label class="vfb-desc"></label> 
</li> 

出于某种原因，当我选择下拉值，结果表格newLabel放置在<label class="vfb-desc"></label>容器时不相匹配。

更新的代码：

<select name="vfb-16" id="vfb-16" class="vfb-select vfb-medium required ">  
    <option value="Select Credit Card type">Select Credit Card type</option> 
    <option value="Visa">Visa</option> 
    <option value="MasterCard">MasterCard</option> 
    <option value="Discover">Discover</option> 
    <option value="America Express">America Express</option> 
    </select> 

<li class="vfb-item vfb-item-instructions " id="item-vfb-37"> 
<label class="vfb-desc"></label> 
</li> 


var newLabel = ''; 
$('#vfb-16').on('change', function(){ 


switch(this.value){ 
    case 'Visa': 
     newLabel = 'Interest'; 
     break; 
    case 'MasterCard': 
     newLabel = 'Future value'; 
     break; 
    case 'Discover': 
     newLabel = 'Present value'; 
     break; 
    case 'Amex': 
     newLabel = 'Payment'; 
     break; 
} 

}).trigger('change'); 

$('#item-vfb-37 label').text(newLabel); //Change the text before changing the value 

终极密码：

jQuery(document).ready(function($) { 

    var newLabel = ''; 
    $('#vfb-16').on('change', function(){ 

    switch(this.value){ 
     case 'Visa': 
      newLabel = '<a href="https://www.odysseyxxxx.com/terms-and-conditions-visa" target="_new">Terms and Conditions visa</a>'; 
      break; 
     case 'MasterCard': 
      newLabel = '<a href="https://www.odysseyxxxx.com/terms-and-conditions-master" target="_new">Terms and Conditions mastercard</a>'; 
      break; 
     case 'Discover': 
      newLabel = '<a href="https://www.odysseyxxxx.com/terms-and-conditions-dis" target="_new">Terms and Conditions discovery</a>'; 
      break; 
     case 'Amex': 
      newLabel = '<a href="https://www.odysseyxxxx.com/terms-and-conditions-amex" target="_new">Terms and Conditions amex</a>'; 
      break; 
    } 

    $('#item-vfb-37 label').html(newLabel); //Change the text/html value after choosing select option 
}); 

<select name="vfb-16" id="vfb-16" class="vfb-select vfb-medium required valid"> 
<option value="Select Credit Card type">Select Credit Card type</option>  
<option value="Visa">Visa</option><option value="MasterCard">MasterCard</option> 
<option value="Discover">Discover</option> 
<option value="Amex">Amex</option> 
</select> 

<li class="vfb-item vfb-item-instructions " id="item-vfb-37"> 
<label class="vfb-desc"></label> 
</li> 

Answer 1

最简单的例子：

$('#vfb-16').on('change', function() { 
    $('#item-vfb-37 label').text($(this).val()); 
});