how to show 2 select options value in another element?

I am have been searched too much on net but nothing found. I have 2 select options tag. I want to show option value in the input tag by multiplying option tag value whatever it is. and selecting 2nd option tag I want to assign 2nd option tag value to 1st option tag value. and I also want to multiply that values as the 1st options value have before. how to do this?

here is my code. My 1st options tag.

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

Here is 2nd option tag.

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

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

Here is Demo

Answers


Changes

  1. Use $(this).val() instead of $(this).find('option:selected').val() to fetch select value. or even better use this.value
  2. use .data() to set value like price_value.data('val', 9); instead of price_value.attr('data-val','9');
  3. No need to use price_value.removeAttr('data-val');

Code

$('#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


This solution would work if you are okay with changing your HTML a bit:

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

Then simply use:

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

That's all!


Need Your Help

Using a C++ reference in inline assembly with GCC

c++ gcc x86-64 inline-assembly

I have a spin lock with the xchg instruction. The C++ function takes in the resource to be locked.

ios car drive guide - real time

ios gps real-time mapquest

I'm trying to make an iOS drive guide app that takes current localization and prints a route (on map) from user loc to some target point.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.