그래서 저는 옷가게를 만들어야하는이 프로젝트를 가지고 있으며 다음을 수행하고 싶습니다.
이 코드는 html로 있습니다.
<select class="sizeb" style="display: none;">
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
JavaScript를 사용하여 옵션 값을 가져 와서 값을 확인하고 생성 한 var price;다음 가격을 확인하고 설정합니다.
var x = <somehow to get the value>;
if (x == 'xxs')
price = 5;
else if(x == 'xs')
price = 10;
나중에 다음과 같이 표시합니다.
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
도움을 주시면 감사하겠습니다.
먼저 HTML 요소에 대한 참조를 가져 와서이를 변수에 할당합니다.
var select = document.querySelector(".sizeb");
그런 다음 가치를 얻습니다.
var val = select.value;
그런 다음 논리와 계산을 수행합니다.
var x = <somehow to get the value>;
if (x == 'xxs'){
price = 5;
} else if(x == 'xs') {
price = 10;
}
그리고 결과를 표시합니다.
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
참고 : 처음에는 숨길 수 있습니다. 이 경우 아무도 값을 선택할 수 없습니다.
이제이 모든 작업을 수행 할 "언제"를 결정해야합니다. 선택의 값이 변경 될 수 있습니다. 이 경우 사용자가 첫 번째 선택을 원하면 이벤트를 트리거하지 않는 아무 작업도하지 않기 option때문에과 같은 첫 번째 항목 을 추가해야합니다 . 따라서 모든 것을 종합하면 다음과 같은 결과를 얻을 수 있습니다.--- Select One ---change
// Get a reference to the select
var select = document.querySelector(".sizeb");
// Set up an event handler that runs when the value in the select changes:
select.addEventListener("change", function(){
// Then you get the value:
var x = select.value;
var price = null;
// Then you do your logic and calculations.
// And if will work, but for this a switch is better
switch (x) {
case 'xxs' :
price = 5;
break;
case 'xs' :
price = 10;
break;
case 's' :
price = 15;
break;
case 'm' :
price = 20;
break;
case 'l' :
price = 25;
break;
case 'xl' :
price = 30;
break;
case 'xxl' :
price = 35;
break;
}
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
});<select class="sizeb">
<option value="">--- Select One ---</option>
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<div id="PriceTag"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다