ValueChange 이벤트에서 Combobox 값으로 텍스트 상자를 업데이트하십시오.

내 궁극적 인 목표는 사용자 입력을 허용하는 드롭 다운을 만드는 것입니다. 내가 할 수있는 최선의 방법은 텍스트 상자 옆에있는 드롭 다운으로 비슷한 것처럼 보이게하는 것입니다. 내가 겪고있는 문제는 드롭 다운 값이 변경 될 때마다 텍스트 상자를 업데이트해야한다는 것입니다. 나는 (아래)와 함께 놀고있는 코드를 가지고 있지만, 어디서나 나를 보내지 않는 것 같습니다! 내가 어떻게 작동하게 할 수있는 지에 대한 조언이나 문법을 엉망으로 만들었습니까?ValueChange 이벤트에서 Combobox 값으로 텍스트 상자를 업데이트하십시오.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<style type="text/css">  
    select 
    { 
     width:200px; 
    } 
</style> 
<head> 
    <title>Test</title> 
    <script type="text/JavaScript"> 

     var select = document.getElementById('theItems'); 
     var input = document.getElementById('stroke'); 
     function otherSelect() 
     { 
      input.value = select.value; 
     } 
    </script> 
</head> 
<body> 
<form action="" method=""> 
    <input name="stroke"/> 
    <select name="theItems" onchange="otherSelect()"> 
     <option value="item1">Item One</option> 
     <option value="item2">Item Two</option> 
     <option value="item3">Item Three</option> 
     <option value="item3">Item Four</option> 
     <option value="other">Other</option>  
    </select> 

    <div id="otherBox" style="visibility: hidden;"> 
     If other: <input name="otherField" type="text" /> 
    </div> 
</form> 


</body>

출처

2013-07-29 Volearix

이, 따라서 문서 타입 (5) html로하지 않습니다 - // W3C // DTD HTML 4.01 // 과도 EN을, 내가 말했듯이 물건에 예쁜 새를 HTML5 태그 – Charles380

을 제거 할 수 있습니다. 태그가 제거되었지만 아직 아무런 대답이 없어 내 목표에 아직 도달하지 못했습니다. 다른 가능한 입력을 주시면 감사하겠습니다! – Volearix

자바 스크립트를 처음 사용하기 때문에 jQuery를 시험해보고 싶을 수도 있기 때문에 몇 가지 복잡한 절차를 간소화 할 수 있습니다. jQuery를 사용하여 내 대답을 게시하고이를 수행하는 것이 얼마나 쉬운지를 보여주는 javascript 만 사용합니다. – Charles380

당신은 window.onload 이벤트에 스크립트를 실행해야합니다 (JScript를 및 HTML 모두 상당히 새로운). 해당 요소는 실행 중일 때 스크립트에서 사용할 수 없습니다. 스크립트를 다음으로 변경하십시오.

<script type="text/JavaScript"> 
window.onload = function(){ 

    var select = document.getElementById('theItems'); 
    var input = document.getElementById('stroke'); 
    function otherSelect() 
    { 
     input.value = select.value; 
    } 
} 
</script>

이렇게하면 HTML 요소가 브라우저에 의해 렌더링 된 후에 스크립트가 실행됩니다.

출처

2013-07-29 17:29:00 mohkhan

여기에 간단한 순수한 JavaScript 구현이 있습니다. http://jsfiddle.net/24Xhn/

마크 업을 설정하여 선택 상자와 다른 입력란의 이름과 ID 속성이 비슷하도록 지정합니다. 클래스를 사용하여 onchange 이벤트를 설정/초기화하고 입력이 숨김 상태로 시작되고 비활성화되었는지 확인합니다. "disabled"애트리뷰트를 true, false로 전환하여 폼이 제출 될 때 input이나 select가 나타나지 않도록하고 JSFiddle에서 다른 조합으로 폼을 제출하면 쿼리 결과를 볼 수 있습니다 URL의 문자열.

HTML

<select id="items1" name="items1" class="select-other"> 
    <option value="item1">Item One</option> 
    <option value="item2">Item Two</option> 
    <option value="item3">Item Three</option> 
    <option value="item3">Item Four</option> 
    <option value="other">Other</option>  
</select> 
<input id="items1-other" name="items1-other" class="input-other" />

// setup 
var inps = document.getElementsByClassName("input-other"); 
for(var i=0; i<inps.length; i++) { 
    var inp = inps[i]; 
    // hide & disable the "other" input 
    inp.style.display = "none"; 
    inp.disabled = true; 
    // set onchange, if input is empty go back to select 
    inp.onchange = function() { 
     var val = this.value; 
     if(val == "") { 
      this.style.display = "none"; 
      this.disabled = true; 
      // get its associated select box 
      var sel = document.getElementById(this.id.replace(/-other$/i, "")); 
      sel.style.display = ""; 
      sel.disabled = false; 
     } 
    }; 
} 
var sels = document.getElementsByClassName("select-other"); 
for(var i=0; i<sels.length; i++) { 
    var sel = sels[i]; 
    // set onchange if value is other switch to input 
    sel.onchange = function() { 
     var val = this.value; 
     if(val == "other") { 
      this.style.display = "none"; 
      this.disabled = true; 
      // get associated input box 
      var inp = document.getElementById(this.id + "-other"); 
      inp.style.display = ""; 
      inp.disabled = false; 
     } 
    }; 
}

출처

2013-07-29 17:59:16

난 그냥 무엇이 잘못된 것인지 깨달았다. 테스트 애플리케이션으로 복사하여 붙여 넣기 전까지는 실제로 HTML을 보지 못했습니다. 문제를 파악했습니다.

id 태그를 stroke 및 theItems 이름 태그가 아닌 다른 태그로 설정해야합니다. 그래서 아무 것도하지 않는 이유입니다. 당신이 닫는 html 태그를 가지고 있지 않았기 때문에 나는 복사/붙여 넣기 문제를 추측하고 있었지만, 나는 그저 당신이 복사를 놓친 것으로 생각했다. 또한 실제 함수 내에서 input 및 select을 검색하기 위해 전역 변수가 필요하지 않으며 실제로 select을 함수에 전달할 수 있습니다.

수정

귀하의 코드 : 나는 또한 새로운 항목을 옆에 자동 업데이트 텍스트 필드와 콤보를 만들고 싶었, 이하 한 시간이 함께했다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css">  
     select 
     { 
      width:200px; 
     } 
    </style> 
    <script type="text/javascript"> 

     function otherSelect(obj) 
     {   
      var input = document.getElementById('stroke'); 
      input.value = obj.value; 
     } 
    </script> 
</head> 
<body> 
<form action="" method=""> 
    <input id="stroke" name="stroke"/> 
    <select id="theItems" name="theItems" onchange="otherSelect(this)"> 
     <option value="item1">Item One</option> 
     <option value="item2">Item Two</option> 
     <option value="item3">Item Three</option> 
     <option value="item3">Item Four</option> 
     <option value="other">Other</option>  
    </select> 

    <div id="otherBox" style="visibility: hidden;"> 
     If other: <input name="otherField" type="text" /> 
    </div> 
</form> 


</body> 
</html>

출처

2013-08-06 16:52:36 Charles380

, 간단한에 따라 w3schools.com의 html 및 javascript 예제. 그것은 내 IE 브라우저에서 완벽하게 작동합니다.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function updateField(name, value) 
{ 
    document.getElementById(name).value = value; 
} 
</script> 
</head> 
<body> 
<select name='10' onchange='updateField(this.name, this.value)'> 
    <option value='volvo'>Volvo</option> 
    <option value='saab'>Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<input type="text" id="10" value="volvo"> 
</body> 
</html>

출처

2014-05-02 07:45:49

ValueChange 이벤트에서 Combobox 값으로 텍스트 상자를 업데이트하십시오.

답변

관련 문제