Блог

Главная - Вопросы по программированию - как показать 2 значения параметров выбора в другом элементе?

как показать 2 значения параметров выбора в другом элементе?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я слишком много искал в сети, но ничего не нашел. У меня есть 2 тега параметров выбора. Я хочу показать значение параметра во входном теге, умножив значение тега параметра, каким бы оно ни было. и выбрав тег 2-го параметра, я хочу присвоить значение тега 2-го параметра значению тега 1-го параметра. и я также хочу умножить эти значения на значение 1-го параметра, которое было раньше. как это сделать?

вот мой код. Мой 1-й тег параметров.

 <select name="" id="test">

        <option selected="" value="0" disabled='disabled'>Select Duration</option>
        <option value="1">1/month</option>
        <option value="2">2/month</option>
        <option value="3">3/month</option>
        <option value="6">6/month</option>
        <option value="12">12/month</option>

    </select>
    <input type="text" data-val="9" id="price_value" style="border:1px solid #0a0; padding:1px 10px; color: #f90;" value="0" size="5"/><br>

Вот тег 2-го варианта.

 <select id="plan">
  <option  value='Basic'>Basic</option>
  <option  value='Standard'>Standard</option>
  <option  value='Professional'>Professional</option>
  <option  value='Enterprice'>Enterprise</option>
</select>

вот JS.

 $('#test').on('change',function(e){
    var input = $(this).next('input[type="text"]');
    var value = $(this).find('option:selected').val();
    input.val( input.data('val') * parseInt(value) );
});


$('#plan').on('change',function(e) {
    var plan = $(this).find('option:selected').val();
    var price_value = $('#price_value');

    if (plan == "Basic") {
        price_value.removeAttr('data-val');
        price_value.attr('data-val','9');
    }
    else if (plan == "Standard"){
        price_value.removeAttr('data-val');
        price_value.attr('data-val','19');
    }
    else if (plan == "Professional"){
        price_value.removeAttr('data-val');
        price_value.attr('data-val','29');
    }
    else if (plan == "Enterprice") {
        price_value.removeAttr('data-val');
        price_value.attr('data-val','59');
    }
});

Вот демонстрация

Ответ №1:

Изменения

  1. Используйте $(this).val() вместо $(this).find('option:selected').val() для извлечения значения выбора. или даже лучше использовать this.value
  2. используйте .data() для установки значения like price_value.data('val', 9); вместо price_value.attr('data-val','9');
  3. Нет необходимости использовать price_value.removeAttr('data-val');

Код

 $('#test').on('change',function(e){
    var input = $(this).next('input[type="text"]');
    var value = $(this).val(); //Or this.value
    input.val( input.data('val') * parseInt(value, 10) );
});


$('#plan').on('change',function(e) {
    var plan = $(this).val();
    var price_value = $('#price_value');

    if (plan == "Basic") {
        price_value.data('val',9);
    }
    else if (plan == "Standard"){
        price_value.data('val',19);
    }
    else if (plan == "Professional"){
        price_value.data('val',29);2
    }
    else if (plan == "Enterprice") {
        price_value.data('val',59);
    }
    $('#test').trigger('change'); //Trigger $('#test') change event

});

ДЕМОНСТРАЦИЯ

Комментарии:

1. Вместо этого не должно отображаться сообщение о предупреждении. просто измените значения тегов 1-го параметра

2. @Мистер новичок, это для демонстрации, делай то, что хочешь.

3. Да, 🙂 теперь все работает нормально и отлично. : D 🙂 большое спасибо и много-много.

4. @Мистер новичок, рад, что смог помочь

5. Теперь я могу сохранить price_val значение в переменной php $ _POST, а затем сохранить в базе данных?

Ответ №2:

Это решение будет работать, если вы согласны немного изменить свой HTML:

 <select id="plan">
  <option value='9'>Basic</option>
  <option value='19'>Standard</option>
  <option value='29'>Professional</option>
  <option value='59'>Enterprise</option>
</select>

Затем просто используйте:

 $('#test, #plan').on('change',function() {
    var valueOne = $('#test').val();
    var valueTwo = $('#plan').val();
    $('#price_value').val(parseInt(valueOne) * parseInt(valueTwo));
});

Вот и все!