자바 스크립트 드롭 다운 메뉴 계산

나에게 약간의 문제가있다. 드롭 다운 메뉴에서 계산을 시도하고 텍스트 상자로 변경합니다. 나는 그걸 알아 내려고 며칠 동안 기능을 코드화하는 방법을 탐색 해왔다. 아무도 도와 줄 수 없거나이 접근 방법에 대한 조언을 해 줄 수 있습니까?자바 스크립트 드롭 다운 메뉴 계산

function numGuest() 
{ 
    var a = document.getElementById("guests"); 
    if(a.options[a.selectedIndex].value == "0") 
    { 
     registration.banq.value = "0"; 
    } 
    else if(a.options[a.selectedIndex].value == "1") 
    { 
     registration.banq.value = "30"; 
    } 
}

<select id="guests" name="guests"> 
<option value="0">0</option> 
<option value="1">1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 

<input type="text" id="banq" name="banq" onChange="numGuest()" disabled />

출처

2012-10-03 ai5uzu

'등록'이란 무엇입니까? 'banq' 란 무엇입니까? 'numGuest' 함수가 텍스트 입력 값이 변경되거나 드롭 다운 값이 변경 될 때 실행 시키길 원합니까? –

등록은 양식 ID 및 이름이고 banq는 텍스트 상자/입력 ID 및 이름입니다. 드롭 다운 메뉴에서 옵션을 선택하면이 기능이 실행되기를 원합니다. – ai5uzu

등록은 정의되지 않는다. guests 요소를 사용한 것과 같은 방식으로 텍스트 입력 요소를 가져와야합니다. 또한 onChange 리스너는 텍스트 영역이 아닌 선택 메뉴에 연결되어야합니다. 코드에서

<html> 
<script> 
function numGuest() 
{ 
    var banq = document.getElementById('banq'); 
    var a = document.getElementById("guests"); 

    if(a.options[a.selectedIndex].value == "0") 
    { 
     banq.value = "0"; 
    } 
    else if(a.options[a.selectedIndex].value == "1") 
    { 
     banq.value = "1"; 
    } 
} 
</script> 
<select id="guests" name="guests" onChange="numGuest()" > 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

    <input type="text" id="banq" name="banq" disabled /> 
</html>

출처

2012-10-03 02:59:49 EL45

요소 ID와 이름을 전역 변수로 사용하는 것은 나쁜 습관입니다. 매우 초기 웹의 IE 기능으로 다른 브라우저에서 호환성을 위해 복사 한 것이므로 폐기해야합니다. – RobG

정말 고마워요! select 태그 대신 onchange를 입력에 넣었다는 것을 몰랐습니다. 일부 코드가 옳았는지 확인해 주셔서 감사합니다. 이 코드를 작성하는 데 너무 많은 다른 방법이 있었고 혼란 스러웠습니다. – ai5uzu

왜 ID = banq (텍스트 필드) 사용할 수 없습니다?

활성화하려면 document.getElementById ('banq'). disabled = false; 선택의 값

function numGuest(){ 
    var theGuestValForCalc = 0; 
    var theFinalResult = 0; 

    theGuestValForCalc = document.getElementById('guests').options[document.getElementById('guests').selectedIndex].value; 



    theFinalResult = theGuestValForCalc * 10 // or some value, calculation, etc. 

    document.getElementById('banq').innerHTML = theFinalResult; 

    // return theFinalResult;

}

출처

2012-10-03 02:57:23

OP가 선택한 옵션의 값을 표시하려고하므로 비활성화됩니다. Dunno 이유는 옵션이 표시되고 비활성화 된 요소가 성공하지 못했기 때문입니다. 아마도 OP는 대신 [readonly] (http://dev.w3.org/html5/spec/single-page.html#the-readonly-attribute) 필드를 원합니다. – RobG

가 :

> <input type="text" id="banq" name="banq" onChange="numGuest()" disabled />

아마 readonl Y 필드해야한다고, 비활성화되지 않습니다.

onchange 수신기는 select 요소에 있어야합니다. 또한, 편의를 위해 수신기의 요소에 대한 참조를 전달할 수

<select name="guests" onchange="numGuest(this)">

을이어서 numGuest 함수 :

function numGuest(element) {

및 소자 핸들러이라는 요소에 대한 참조가 될 것이다 함수. 선택한 옵션에 값이있는 경우

var form = element.form; 
    var banq = form.banq; 
    var a = form.guests; // or element

당신은 당신은 당신의 코드를 단순화 할 수 있습니다, 당신의 컨트롤 형태로, 그리고 이름을 가진 폼 컨트롤들은에있는 양식의 특성을 이름 만들어진 말했다 때문에 (아래 참고 참조), select 요소의 value 속성을 직접 사용할 수 있습니다.

if (a.value == "0") { 
    banq.value = "0"; 

    } else if (a.value == "1") { 
    banq.value = "1"; 
    }

이제 끝났습니다.

주 : 옵션이 값의 속성 또는 속성이 없습니다

경우, 그 값이 텍스트 내용입니다. 불행히도 IE의 이전 버전은 이것을 지원하지 않으므로 select.options[select.selectedIndex].text을 사용해야합니다. 하지만 가장 좋은 방법은 항상 옵션에 값을 부여하는 것입니다. 그러면 select 요소의 값을 얻을 수 있습니다.
양식 컨트롤의 이름과 ID를 지정할 필요가 없습니다. 그들은 성공하기 위해 이름을 가져야합니다. 따라서 이름을주고 잊어 버리십시오.

출처

2012-10-03 03:35:40 RobG

자바 스크립트 드롭 다운 메뉴 계산

답변

관련 문제