Question

在我的表格中，我有两个选择框：

<select id="base_plan">
  <option value="free">Free</option>
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="plan_id">
  <option value="placeholder_weekly">Weekly</option>
  <option value="placeholder_monthly">Monthly</option>
  <option value="placeholder_yearly">Yearly</option>
</select>

我正在尝试更新第二个选择框中所有选项的值，具体取决于在第一个选择框中选择的选项。

我尝试过这样的事情......

$('#base_plan').on('change', function() {   
    var new_value = this.value;     
    $('#plan_id option').val().replace("placeholder", new_value); 
});

..但它根本不起作用。

有人可以帮忙吗？

Answer 1

您可以为val方法提供函数：

$('#base_plan').on('change', function() {   
    var new_value = this.value;     
    $('#plan_id option').val(function(_, oldVal) {
        return new_value + '_' + oldVal.split('_')[1];
    });
});

请注意，在第一次更改值后，它们不再具有placeholder部分，这就是为什么在replace('placeholder', new_value)之前更换部件之前更好_ {1}}。例如，使用split方法和字符串连接。

查看下面的演示。

＆＃13;

$('#base_plan').on('change', function() {   
    var new_value = this.value;     
    $('#plan_id option').val(function(_, oldVal) {
        return new_value + '_' + oldVal.split('_')[1];
    });
    
    // Logging new values
    $('#log').html($('#plan_id option').map(function() {
        return this.value;
    }).get().join('\n'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="base_plan">
  <option value="free">Free</option>
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="plan_id">
  <option value="placeholder_weekly">Weekly</option>
  <option value="placeholder_monthly">Monthly</option>
  <option value="placeholder_yearly">Yearly</option>
</select>

<pre id="log"></pre>

＆＃13;

如何使用jQuery更新选择选项？

1 个答案: