0

I'm looking to write a snippet of jQuery based on variables, but I'm not sure the best way to go around this.

I have two select fields, the first one has options with values and the second one has options with data-values. depending on what option/value is selected in the first select field, I need to dynamically update the data-value in the option of the second field.

My HTML is:

<select required="" name="options" id="cab" class="select-model">
    <option selected="" data-value="0" disabled="disabled"></option>
    <option data-value="500" value="1" class="one">1x12 Cabinet</option>
    <option data-value="1000" value="2">2x12 Cabinet</option>
    <option data-value="1500" value="3">3x15 Cabinet</option>
    <option data-value="0" value="0">No cabinet</option>
</select>

<select required="" name="options" id="speaker" class="select-model">
    <option selected="" data-value="0" disabled="disabled"></option>
    <option data-value="0">Celestion</option>
    <option data-value="100" class="widow">Black Widow</option>
</select>

<var class="total">0</var>

And my current jQuery snippet is:

$("#cab").on('change', function () { 
    $("#cab").prop($(this).val() == "1x12 Cabinet");
    $(".widow").attr('data-value', 100);        
});

This works fine but I need to assign a variable so that the data-value for the Black Widow is:

  • multiplied by 2 (or set to 200) when value=2 is selected in #cab
  • multiplied by 3 (or set to 300) when value=3 is selected in #cab

etc...

I have tried creating a var map already but I'm afraid my jQuery isn't good enough yet!

Any help would be great! Here's a link to a jsFiddle

4

1 回答 1

2 
$("#cab").on('change', function () { 
    var value = $(this).find('option:selected').val();
    $(".widow").attr('data-value', value * 100);
});

希望这有帮助！在这里更新小提琴http://jsfiddle.net/aKkej/5/

于 2013-07-22T11:36:51.390 回答