Question

我在网上搜索得太多但没找到。我有2个选择选项标签。我希望通过将选项标记值乘以它来在输入标记中显示选项值。并选择第二个选项标签我想将第二个选项标签值分配给第一个选项标签值。我还希望将这些值乘以之前的第一个选项值。这该怎么做？

这是我的代码。我的第一个选项标签。

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

这是Demo

Answer 1

更改

使用$(this).val()代替$(this).find('option:selected').val()来获取选择值。甚至更好地使用this.value
使用.data()设置price_value.data('val', 9);而不是price_value.attr('data-val','9');
无需使用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

});

DEMO

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

这就是全部！

如何在另一个元素中显示2个选择选项值？

2 个答案: