시작 가격을 추가하고 가격을 추가하십시오.

Question

나는 시작 가격을 가진 div와 다양한 옵션을 가진 드롭 다운을 가지고 있습니다. 드롭 다운 선택에 따라 시작 가격을 변경하고 싶습니다. 그냥 옵션에서 값을 저장

<div id="price">$50.00</div> 

<select> 
    <option value="1">Option 1 (+$50.00)</option> 
    <option value="2">Option 2 (+$100.00)</option> 
    <option value="3">Option 3 (+$150.00)</option> 
    <option value="4">Option 4 (+$200.00)</option> 
</select> 

은이 코드를 사용하고 있지만,

Answer 1

하고 요소 속성 : 여기에 작업 바이올린이 있습니다.

<div id="price" data-price="50.00">$50.00</div> 

<select> 
    <option value="1" data-price="50.00">Option 1 (+$50.00)</option> 
    <option value="3" data-price="100.00">Option 2 (+$100.00)</option> 
    <option value="4" data-price="150.00">Option (+$150.00)</option> 
    <option value="5" data-price="200.00">Option 4 (+$200.00)</option> 
</select> 


Total: <div id="finalPrice">$50.00</div> 

그리고 당신의 스크립트에 대한

: 당신이 나와 가격의 상단에 "최종 가격을"원처럼

$('select').change(function() { 
    var total = $("#price").data("price")*1; 

    $('select option:selected').each(function() { 
     total += $(this).data("price")*1; 
    }); 

    $('#finalPrice').text('$' + total.toFixed(2)); 
}); 

Requisite Fiddle

는 또한, 소리가났다, 그래서 나는에 추가 사업부를 만들어 그 값을 잡아라. 동일한 '가격'을 다시 사용하려면 $('#finalPrice') 선택 사항을 $('#price')으로 바꾸면 원하는대로 작동합니다.

Answer 2

jsFiddle Demo

세드릭

$('select').change(function() { 
    var total = 0; 

    $('select option:selected').each(function() { 
     var m = /\(\+ \$(\d+\.\d+)\)/.exec(this.value); 

     if(m !== null) { 
      total += +m[1]; 
     } 
    }); 

    var decimalPart = (total - Math.floor(total)) * 100; 

    $('#finalPrice').text('$' + Math.floor(total) + '.' + (decimalPart < 10 ? '0' : '') + decimalPart); 
}); 

정확하게 확실하지 작동하지 않는 value 속성을 . 훨씬 간단 해!

<select> 
    <option value="50.00">Option 1 (+$50.00)</option> 
    <option value="100.00">Option 2 (+$100.00)</option> 
    <option value="150.00">Option (+$150.00)</option> 
    <option value="200.00">Option 4 (+$200.00)</option> 
</select> 

그리고 자바 스크립트. 우리는 원래 값을 얻고 $ 기호를 제거합니다. 드롭 다운 메뉴에서 this.value에 추가합니다.

$('select').change(function() { 
    var originalPrice = parseFloat($('#price').text().replace('$', '')); 
    var total = parseFloat(this.value) + originalPrice; 

    $('#finalPrice').text('$' + total.toFixed(2)); 
}); 

Answer 3

<div id="price" data-value='50.00'>$50.00</div> 

<select> 
    <option value="1" data-value='50.00'>Option 1 (+$50.00)</option> 
    <option value="2" data-value='100.00'>Option 2 (+$100.00)</option> 
    <option value="3" data-value='150.00'>Option 3 (+$150.00)</option> 
    <option value="4" data-value='200.00'>Option 4 (+$200.00)</option> 
</select> 

<div id="finalPrice"></div> 

의 .js : 당신이 0이 아닌 소수점을 사용하는 경우

$('select').change(function() { 
    var total = parseFloat($('#price').data('value')); 

    $('select option:selected').each(function() { 
     var m = parseFloat($(this).data('value')); 

     if(m !== null) { 
      total += m; 
     } 
    }); 
    $('#finalPrice').data('value', total.toFixed(2)); 
    $('#finalPrice').text('$' + total.toFixed(2)); 
}); 

것은 이제 당연이 좀 더 복잡해진다.

편집 : 프리젠 테이션의 외부로 데이터를 재구성 제안 http://jsfiddle.net/remus/ACnsp/