如何通过选择输入中的值选择特定选项并为每个选项分配不同的功能？

Question

我想从选择输入中选择特定选项，并为每个选项分配不同的语句。例如 -

$(document).ready(function(){
        if($('#selectPlans option[value=Starter]:selected')) {
            $('#outcome').html('2 USD');
        }
        else if($('#selectPlans option[value=Premium]:selected')) {
            $('#outcome').html('4 USD');
        }
        else if($('#selectPlans option[value=Business]:selected'))    {
            $('#outcome').html('5 USD');
        }
        else {
            $('#outcome').html('');
        }

});

<div class="plans">
    <select name="selectPlans" id="selectPlans">
        <option value="Starter">Starter</option>
        <option value="Premium">Premium</option>
        <option value="Business">Business</option>
    </select>
    <div class="outcome"></div>
</div>

在有人选择选项时，在上面的代码中 1.“Starter”它应该在ID为“结果”的部分显示2美元 2.“高级”它应该在ID为“结果”的部分显示4美元 3.“业务”它应该在ID为“结果”的部分显示5美元 还有另一种方法可以执行此操作，如下例所示

$('#selectPlans').change(function(){
            var optionSelected = $('#selectPlans option:selected');
            $('#outcome').html(optionSelected.val());
        });

<div class="plans">
    <select name="selectPlans" id="selectPlans">
        <option value="2 USD">Starter</option>
        <option value="4 USD">Premium</option>
        <option value="5 USD">Business</option>
    </select>
    <div class="outcome"></div>
</div>

但是这样我就无法选择具体的选项。所以，我需要知道如何选择一个特定的选项并为其分配一个功能。请帮忙。

Answer 1

首先你有一个类型错误：$('#outcome')应该是$('.outcome')

修复后，您可以将代码缩短为：

$('#selectPlans').change(function() {
  $('.outcome').html($('#selectPlans').val());
});

工作演示

$('#selectPlans').change(function() {
  $('.outcome').html($('#selectPlans').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plans">
  <select name="selectPlans" id="selectPlans">
    <option value="2 USD">Starter</option>
    <option value="4 USD">Premium</option>
    <option value="5 USD">Business</option>
  </select>
  <div class="outcome"></div>
</div>