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.在“入门”中，其ID为“结果”的部分应显示2 USD

2.“ Premium”，其ID为“ outcome”的部分应显示4 USD

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>

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

1 个答案: