Блог

Я хочу выбрать конкретную опцию из входных данных select и назначить разные инструкции для каждой опции. Например —

 $(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» в разделе с идентификатором «результат» должно быть указано 2 доллара США

2. «Премиум» должен показывать 4 доллара США в разделе с идентификатором «результат»

3. «Бизнес» в разделе с идентификатором «результат» должно быть указано 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>  

Но таким образом я не могу выбрать конкретную опцию. Итак, мне нужно знать, как выбрать конкретную опцию и назначить ей функцию. Пожалуйста, помогите.

Сначала у вас ошибка типа: $('#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>