如何在另一個元素中顯示2個選擇選項值？

Question

網上對我的搜索過多，但未找到任何內容。 我有2個select options標簽。 我想通過將選項標簽值乘以它來顯示輸入標簽中的選項值。 並選擇第二選項標簽，我想將第二選項標簽值分配給第一選項標簽值。 並且我還想將該值乘以第一選項值之前的值。 這個怎么做？

這是我的代碼。 我的第一個選項標簽。

<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>

這是第二個選項標簽。

<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');
    }
});

這是演示

Answer 1

變化

1. 使用$(this).val()代替$(this).find('option:selected').val()來獲取選擇值。 甚至更好地使用this.value
2. 使用.data()設置諸如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

});

演示

Answer 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));
});

就這樣！