자바 스크립트 다중 선택 상자

잠시 동안 답변을 찾으려고했지만 아무 소용이 없었습니다.자바 스크립트 다중 선택 상자

저는 간단한 온라인 계산기 (일부 광전지 패널 에너지를 계산합니다)를하려고합니다. 그러나 저는 (Flash의 ActionScript 3.0으로 잠시 동안 사용 했었지만) Javascript가 처음이었습니다.

내가해야 할 일은 다른 선택 그룹이 페이지에 나타나는 것을 정의하는 html 선택입니다. 이런 식으로 뭔가 (분명히 이것은 단지 예를 설정, 작동하지 않는)의 경우 약간의 혼란

HTML

<html> 
<body> 
<select id="test1" onclick="checkField()"> 
<option>Selected A Group</option> 
<option>Selected B Group</option> 
</select> 
<script>//insert second group here</script> 
</body> 
</html>

자바 스크립트

function checkField(){ 
var temp = document.getElementById('test1').value; 

if(temp === "Selected A Group"){ 
//insert code to "echo" the first optional select group 
} else { 
//insert code to "echo" the second optional select group 
} 
}

미안하지만, 난 정말 모든 설명 캔트 잘. http://www.toshiba.eu/innovation/download_drivers_bios.jsp 여기

출처

2013-10-18 FoxLift

코드가 작동합니다. 첫 번째 선택적 선택 그룹 인' – Praveen

'을 삽입하는 것이 무엇을 의미합니까? 내 대답을 살펴보십시오. 이미 확실한 것을 선택 했더라도, 그것은 당신을 도울 수있는 몇 가지 실습을 포함합니다 자바를 더 잘 이해하십시오 – aleation

데모 :

<select id="test1" id="name" onchange="checkField()"> 
    <option>----</option> 
<option>Selected A Group</option> 
<option>Selected B Group</option> 
</select> 
<div id="optional">Please select!</div>

JS :

function checkField(){ 
var temp = document.getElementById('test1').value; 

    switch(temp){ 

     case "Selected A Group": 
      document.getElementById("optional").innerHTML="<select name='optionalA'><option>1</option><option>2</option></select>"; 
      break; 
     case "Selected B Group": 
      document.getElementById("optional").innerHTML="<select name='optionalB'><option>3</option><option>4</option></select>"; 
      break 
      default: 
       document.getElementById("optional").innerHTML="Please select!"; 
      break; 

    } 

}

다만 Mevins 같은 약 http://jsfiddle.net/3GkrX/

는 ....

를 HTML/전환 변경된 경우 비록

두 번째 그룹을 실제 옵션으로 추가하고 기본값을 as "선택 해주세요". 귀하의 경우에는 필요하지 않을 수도 있습니다 귀하의 경우에

출처

2013-10-18 10:32:18 Steen

아, "innerHTML"에 대해 몰랐습니다. Flash AS3에서 무비 클립을 스테이지에 추가/제거하기 만하면 JS에 새로 온 사람이되어 가끔 JS 내에서 html에 영향을주는 방법을 모릅니다. 이것은 완벽하게 작동했습니다. 감사합니다. – FoxLift

당신은 환영합니다 :-) – Steen

이 거의 바로 그 일을 데모 http://codepen.io/anon/pen/izAHo 입니다 : 은 여기에서, 옵션을 선택 어디에하면 다른 필드에 따라 변경하게 내가 원하는 것이 무엇의 예입니다.

옵션 태그에 onclick 이벤트를 넣어 선택한 옵션에 따라 변경 사항을 트리거해야합니다.

HTML

<html> 
<body> 

<select id="test1"> 
<option onclick="checkField()">Selected A Group</option> 
<option>Selected B Group</option> 
</select> 

<select id="test2"> 
<option onclick="check2Field()">Selected C Group</option> 
<option>Selected D Group</option> 
</select> 

<script>//insert second group here</script> 
</body> 
</html>

function checkField(){ 
var temp = document.getElementById('test1').value; 
if(temp === "Selected A Group"){ 
document.getElementById('test2').innerHTML="<option>Selected halloooo Group</option>"; 
} else { 
//insert code to "echo" the second optional select group 
} 
}

체크 아웃 더 명확하게 내 데모. 여기

출처

2013-10-18 10:29:49

실제로는 JavaScript가 값을 직접 "반향"하지 않으며 디버그 콘솔에 console.log(your value);을 사용하여 값을 기록합니다. 내 메모리가 맞지 않으면 AS2 trace()과 유사합니다. 실패.

문서에 정보를 출력하려면 document.write document.write를 사용하면 문서 끝에 직접 쓰게됩니다.

올바른 방법은 원하는 요소가 포함 된 DOM 요소를 만든 다음 원하는 요소에 추가하는 것입니다.코멘트 OUPUT로 데이터 패턴이있는 경우 루프를 사용하여이 약간 짧은 만들 수있는 방법이있다 물론

<!-- Be Aware to use the onchange trigger on select boxes, if you use onclick the function will run, even 
if you didn't really chose any option --> 
<select id="test1" onchange="checkField()"> 
<!-- Is good to have a first non-value option, better to trigger the onchange event, if you have 
Select A Group as first option and you click on it, it didn't really "Change", you would have to 
pick B Group and then A Group again to trigger the onchange event correctly. --> 
<option value="">-- select an option --</option> 
<!-- You can have a value attribute on the options, so it's easy to process when programming 
while displaying a more detailed description to the users --> 
<option value="A">Selected A Group</option> 
<option value="B">Selected B Group</option> 
</select> 

<!-- We create an empty element where we are gonna place the new Select --> 
<div id="newSelect"></div> 

<!-- By Placing the Javascript on the end of <body>, we ensure that all the DOM elements loaded before running the script --> 
<script> 
    function checkField(){ 
     var newSelect = document.getElementById('newSelect'); //targeting container;  
     var temp = document.getElementById('test1').value; 

     //Some tasks we do always the option chose is not the first custom one, so we don't have to repeat it 
     //on the two If's below 
     if(temp !== ""){ 
      // We remove the select if we placed one already before, so we can add the new one, 
      // For example if we chose B Group but changed our mind and Chose A Group later. 
      if(oldChild = newSelect.getElementsByTagName('select')[0]){ 
       oldChild.remove(); 
      } 

      var select = document.createElement("select"); 
      select.setAttribute('id', 'newSelect'); 

     } 

     if(temp === "A"){ 
      //you could do JUST: 
      //body.innerHTML = "all the html you want in here" instead of all the code following; 
      //but all those code is supposed to be the "correct way" of adding elements to the HTML, 
      //Google a bit about that for detailed explanations 

      var option1 = document.createElement("option"); 
      option1.value = 1; 
      option1.text = "Option 1"; 
      var option2 = document.createElement("option"); 
      option1.value = 2; 
      option2.text = "Option 2"; 

      select.appendChild(option1); 
      select.appendChild(option2); 

      newSelect.appendChild(select); 
     } else { 
      var option1 = document.createElement("option"); 
      option1.value = 3; 
      option1.text = "Option 3"; 
      var option2 = document.createElement("option"); 
      option1.value = 4; 
      option2.text = "Option 4"; 

      select.appendChild(option1); 
      select.appendChild(option2); 

      newSelect.appendChild(select); 
     } 
    } 
</script>

에서보세요,하지만 당신은의 이해를 얻을 수 있도록에게 "간단한"방법을 수행 할 수 있습니다 자바 스크립트.

희망이 도움이되었습니다.

출처

2013-10-18 11:04:23 aleation

자바 스크립트 다중 선택 상자

답변

관련 문제