jQuery - 다른 옵션의 값에 따라 옵션에 데이터 값을 할당하려면 어떻게합니까?

Question

변수를 기반으로 jQuery 스 니펫을 작성하려고 합니다만,이 문제를 해결하는 가장 좋은 방법은 아닙니다.

두 개의 선택 필드가 있는데 첫 번째 필드에는 값이있는 옵션이 있고 두 번째 필드에는 데이터 값이있는 옵션이 있습니다. 어떤 옵션/값이 첫 번째 선택 필드에서 선택되었는지에 따라 두 번째 필드의 옵션에서 데이터 값을 동적으로 업데이트해야합니다.

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

그리고 내 현재 jQuery를 조각은 다음과 같습니다 :

내 HTML은

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

이 잘 작동하지만 난 블랙 위도우의 데이터 값이되도록 변수를 지정해야합니다 :

• 2 곱 (또는 200로 설정) 값 = 2 #cab
,691,363 선택할 때 3을 곱한 (또는 300으로 설정) 값 = 3 #cab

등 선택한 경우210

...

나는 이미 VAR지도를 만드는 시도했지만 내 jQuery를 하는게 아닙니다 두려워 아직 충분하지 않아!

도움이 될 것입니다. Here's a link to a jsFiddle

Answer 1

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

희망이 도움을! 업데이트 된 피들 여기 http://jsfiddle.net/aKkej/5/