이 자습서에서는 JavaScript를 사용하여 입력 텍스트에서 선택 태그로 옵션을 추가하는 절차를 정의합니다.
JavaScript를 사용하여 입력 텍스트에서 태그를 선택하는 옵션을 추가하는 방법은 무엇입니까?
JavaScript를 사용하여 입력 텍스트의 옵션을 선택 태그에 추가하려면 다음과 같은 다양한 방법을 사용할 수 있습니다.
각각의 방법을 하나씩 알아보자!
방법 1: 옵션 생성자와 함께 add() 메서드를 사용하여 입력 텍스트에서 태그를 선택하는 옵션 추가
선택 태그의 입력 텍스트에서 옵션을 추가하려면 ' 추가하다() '와 ' 옵션 '건설자. add() 메서드는 '의 옵션에 요소를 추가하는 데 사용됩니다. HTMLSelectElement '는
통사론
제공된 구문에 따라 선택 태그에 옵션을 추가하기 위해 add() 메서드를 사용합니다.
추가하다 ( 옵션, 기존옵션 ) ;여기서 ' 옵션 ' 대신 추가될 새 옵션을 나타냅니다. 기존옵션 '.
예시
다음을 사용하여 드롭다운 메뉴인 입력 필드를 만듭니다. <선택> 태그 및 선택 요소에 새 옵션을 추가하는 버튼, ' 삽입 옵션() ' 클릭 시 기능:
< 입력 유형 = '텍스트' ID = 'txt' 자리 표시자 = '옵션을 추가하려면 텍스트를 입력하세요' >< 아이디 선택 = '옵션' >
< 옵션 가치 = '씨' > 씨 옵션 >
고르다 >
< 브 >< 브 >
< 버튼 아이디 = 'btn 추가' 클릭 = '삽입 옵션()' > 옵션 추가 단추 >
JS 파일에서 ' 삽입 옵션() '를 사용하여 할당된 ID가 있는 버튼, 텍스트 상자 및 선택 요소에 액세스합니다. 쿼리 선택기() ' 방법. 그런 다음 Option 생성자를 사용하여 옵션의 인스턴스를 만들고 목록 끝에 추가해야 하는 기존 옵션과 새 옵션을 전달하여 add() 메서드를 호출합니다.
기능 삽입 옵션 ( ){
상수 추가 = 문서. 쿼리 선택기 ( '#추가' ) ;
상수 리스트 박스 = 문서. 쿼리 선택기 ( '#옵션' ) ;
상수 쓰러지 다 = 문서. 쿼리 선택기 ( '#txt' ) ;
상수 옵션 = 새로운 옵션 ( 쓰러지 다. 값 , 쓰러지 다. 값 ) ;
리스트 박스. 추가하다 ( 옵션, 정의되지 않음 ) ;
쓰러지 다. 값 = '' ;
쓰러지 다. 집중하다 ( ) ;
}
출력은 텍스트 필드의 새 옵션이 드롭다운 메뉴 끝에 추가되었음을 보여줍니다.
메모: 이 방법을 사용하여 undefined 대신 두 번째 매개변수로 기존 옵션의 값을 추가하여 선택 태그의 시작 부분에 옵션을 추가할 수 있습니다. 기존 옵션보다 먼저 새 옵션을 추가합니다.
다른 방법으로 넘어갑시다!
방법 2: addChild() 메서드와 함께 createElement()를 사용하여 입력 텍스트에서 태그를 선택하는 옵션 추가
'를 사용하여 새 요소를 만들 수 있는 또 다른 방법이 있습니다. 생성 요소() '와 ' 추가자식() ' 방법. 이 방법을 사용하여 선택 태그의 시작 부분에 옵션을 추가합니다.
통사론
appendChild() 메서드를 사용하여 입력 텍스트에서 선택 태그에 옵션을 추가하려면 다음 구문을 사용합니다.
추가자식 ( 새로운 옵션 값 ) ;예시
여기에 두 가지 옵션을 추가하여 드롭다운 목록을 만듭니다. 씨 ' 그리고 ' C++ ', 입력 필드 및 '라는 사용자 정의 JavaScript 함수를 호출하는 버튼 삽입 옵션() ' onclick 이벤트가 트리거될 때:
< 입력 유형 = '텍스트' ID = 'txt' 자리 표시자 = '옵션을 추가하려면 텍스트를 입력하세요' >< 아이디 선택 = '쓰러지 다' >
< 옵션 > 씨 옵션 >
< 옵션 > 씨 ++ 옵션 >
고르다 >
< 브 >< 브 >
< 버튼 클릭 = '삽입 옵션();' > 옵션 추가 단추 >
'라는 함수에서 삽입 옵션() ', 먼저 할당된 id를 사용하여 select 요소와 텍스트 필드에 액세스한 다음 옵션 인스턴스를 생성하기 위해 createElement() 및 createTextNode() 메서드를 호출하고 텍스트 값을 옵션으로 가져옵니다. 그 후, appendChild() 메소드를 호출하고 텍스트 값을 옵션으로 전달한 다음 '를 사용하여 선택 목록의 시작 부분에 이 옵션을 추가합니다. 이전에 삽입() ' 선택 요소가 있는 메소드:
기능 삽입 옵션 ( ){
변수 선택 = 문서. getElementById ( '쓰러지 다' ) ,
텍스트 값 = 문서. getElementById ( 'txt' ) . 값 ,
새로운 옵션 = 문서. 요소 생성 ( '옵션' ) ,
새로운 옵션 값 = 문서. createTextNode ( 텍스트 값 ) ;
새로운 옵션. 추가자식 ( 새로운 옵션 값 ) ;
고르다. 이전에 삽입 ( new옵션, 선택합니다. 첫 번째 차일드 ) ;
}
출력에 텍스트 필드의 새 옵션이 드롭다운 메뉴 시작 부분에 추가되었음을 알 수 있습니다.
입력 텍스트에서 선택 태그로 옵션을 추가하기 위한 가능한 모든 솔루션을 컴파일했습니다.
결론
JavaScript를 사용하여 입력 텍스트의 옵션을 선택 태그에 추가하려면 add() 메서드 또는 appendChild() 메서드를 비롯한 JavaScript 내장 메서드를 사용할 수 있습니다. 목록 시작과 끝에서 선택 태그에 옵션을 추가할 수 있습니다. 이 자습서에서는 자세한 예제와 함께 JavaScript를 사용하여 입력 텍스트에서 선택 태그로 옵션을 추가하는 절차를 정의했습니다.