Как выбрать конкретную опцию по ее значению из выбранного входа и назначить разные функции для каждой опции? - PullRequest
Новая
       12

Как выбрать конкретную опцию по ее значению из выбранного входа и назначить разные функции для каждой опции?

0 голосов
/ 13 марта 2019

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

$(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. «Стартер» должен показывать 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>

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

1 Ответ

1 голос
/ 13 марта 2019

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