입력 값에 따라 드롭 다운에서 옵션 추가 및 삭제

라자 O

입력 상자에 값을 입력하고 버튼을 클릭하면. 드롭 다운에 값이있는 경우 드롭 다운에서 입력 값을 확인하고 싶습니다. 해당 옵션을 제거하고 싶습니다. 그렇지 않으면 옵션에 입력 값을 추가하고 싶습니다.

HTML :

<input type="text" id="inputValue" />
<button id="myBtn" onclick="validate()">Click</button>
<select id="mySelect">
   <option>Apple</option>
   <option>Orange</option>
   <option>Mango</option>
   <option>Lemon</option>
</select>

JS :

function validate() {
   var ipValue = document.getElementById('inputValue').value;
   var select = document.getElementById('mySelect');
   for(i=0;i<select.length;i++) {
      if(select[i] == ipValue) {
         ipValue.removeChild(select[i]);
      }
      else {
         var option = document.createElement('option');
         select.appendChild(option);
         option.innerHTML = ipValue;
      }
   }
}
Ason

이것은 당신을 위해 그것을 할 것입니다.

무엇보다도 사용하는 옵션 값을 삭제하고 select.options.remove(index)추가select.add(option)

function validate() {
  var ipValue = document.getElementById('inputValue').value;
  var select = document.getElementById('mySelect');
  for(i=0;i<select.options.length;i++) {    
    if(select.options[i].text == ipValue) {
      select.options.remove(i);
      return;
    }
  }
  if(ipValue.trim().length > 0) {
    var option = document.createElement('option');
    option.text = ipValue;
    select.add(option)
  }
}
<input type="text" id="inputValue" />
<button id="myBtn" onclick="validate()">Click</button>
<select id="mySelect">
   <option>Apple</option>
   <option>Orange</option>
   <option>Mango</option>
   <option>Lemon</option>
</select>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

HTML 선택 옵션 드롭 다운에 입력 기능 추가

분류에서Dev

jQuery를 사용하여 텍스트 상자 입력에 따라 드롭 다운 목록에서 옵션 선택

분류에서Dev

드롭 다운에서 값 가져 오기 및 반응 입력

분류에서Dev

옵션 드롭 다운 jquery에서 입력 값 복사

분류에서Dev

사용자에게 드롭 다운 메뉴에서 선택하거나 자신을 입력하여 테이블에 추가 할 수있는 옵션 제공

분류에서Dev

드롭 다운 목록에서 선택한 옵션을 가져오고 laravel의 기본 통화에 따라 모든 제품 가격을 변환하는 방법

분류에서Dev

다른 드롭 다운 옵션 선택시 1 개의 드롭 다운에서 선택 옵션을 추가 / 제거하는 방법

분류에서Dev

드롭 다운에 따라 다른 옵션 변경

분류에서Dev

PHP-배열에서 드롭 다운 옵션 추가

분류에서Dev

드롭 다운 옵션에 따라 전환

분류에서Dev

드롭 다운에 ng-model이 추가되면 빈 옵션 제거 (AngularJS 1.4)

분류에서Dev

Javascript가 ID로 드롭 다운에서 <옵션>을 제거합니다.

분류에서Dev

드롭 다운에서 선택한 옵션을 가져오고 입력 필드와 곱하는 방법

분류에서Dev

배열 값에 따라 드롭 다운의 jQuery 숨기기 옵션

분류에서Dev

Angular JS-드롭 다운의 부울 값에 따라 표시 선택 옵션

분류에서Dev

옵션 및 c : out을 사용할 때 JSP / JSTL의 드롭 다운 목록에서 값 가져 오기

분류에서Dev

(자바 스크립트) 드롭 다운 목록에서 선택한 옵션에 따라 변수 값을 변경하는 방법은 무엇입니까?

분류에서Dev

선택 드롭 다운에서 옵션을 삭제하는 방법

분류에서Dev

Shopify 여러 제품 옵션, 생성 된 드롭 다운 옵션에 이벤트 추가

분류에서Dev

드롭 다운 메뉴에서 선택한 옵션에 따라 다른 탭에 자동 복사 및 붙여 넣기

분류에서Dev

선택 드롭 다운에서 표현식이 제공된 각도가 다른 옵션 값 또는 문자열

분류에서Dev

Jquery 복제 및 입력 값에 추가

분류에서Dev

Python의 동적 드롭 다운에서 옵션 값을 추출 / 긁는 방법은 무엇입니까?

분류에서Dev

입력 창에 드롭 다운 옵션 넣기

분류에서Dev

자바 스크립트 드롭 다운-동일한 드롭 다운에서 선택한 옵션에 따라 다른 옵션을 표시합니다.

분류에서Dev

입력 값에 따라 옵션 값 변경

분류에서Dev

Angularjs : 사용자 입력에 따라 드롭 다운 채우기

분류에서Dev

UISearchbar 및 UITextfields 아래에 드롭 다운 제안 추가

분류에서Dev

계단식 드롭 다운 및 목록에서 항목 삭제

Related 관련 기사

  1. 1

    HTML 선택 옵션 드롭 다운에 입력 기능 추가

  2. 2

    jQuery를 사용하여 텍스트 상자 입력에 따라 드롭 다운 목록에서 옵션 선택

  3. 3

    드롭 다운에서 값 가져 오기 및 반응 입력

  4. 4

    옵션 드롭 다운 jquery에서 입력 값 복사

  5. 5

    사용자에게 드롭 다운 메뉴에서 선택하거나 자신을 입력하여 테이블에 추가 할 수있는 옵션 제공

  6. 6

    드롭 다운 목록에서 선택한 옵션을 가져오고 laravel의 기본 통화에 따라 모든 제품 가격을 변환하는 방법

  7. 7

    다른 드롭 다운 옵션 선택시 1 개의 드롭 다운에서 선택 옵션을 추가 / 제거하는 방법

  8. 8

    드롭 다운에 따라 다른 옵션 변경

  9. 9

    PHP-배열에서 드롭 다운 옵션 추가

  10. 10

    드롭 다운 옵션에 따라 전환

  11. 11

    드롭 다운에 ng-model이 추가되면 빈 옵션 제거 (AngularJS 1.4)

  12. 12

    Javascript가 ID로 드롭 다운에서 <옵션>을 제거합니다.

  13. 13

    드롭 다운에서 선택한 옵션을 가져오고 입력 필드와 곱하는 방법

  14. 14

    배열 값에 따라 드롭 다운의 jQuery 숨기기 옵션

  15. 15

    Angular JS-드롭 다운의 부울 값에 따라 표시 선택 옵션

  16. 16

    옵션 및 c : out을 사용할 때 JSP / JSTL의 드롭 다운 목록에서 값 가져 오기

  17. 17

    (자바 스크립트) 드롭 다운 목록에서 선택한 옵션에 따라 변수 값을 변경하는 방법은 무엇입니까?

  18. 18

    선택 드롭 다운에서 옵션을 삭제하는 방법

  19. 19

    Shopify 여러 제품 옵션, 생성 된 드롭 다운 옵션에 이벤트 추가

  20. 20

    드롭 다운 메뉴에서 선택한 옵션에 따라 다른 탭에 자동 복사 및 붙여 넣기

  21. 21

    선택 드롭 다운에서 표현식이 제공된 각도가 다른 옵션 값 또는 문자열

  22. 22

    Jquery 복제 및 입력 값에 추가

  23. 23

    Python의 동적 드롭 다운에서 옵션 값을 추출 / 긁는 방법은 무엇입니까?

  24. 24

    입력 창에 드롭 다운 옵션 넣기

  25. 25

    자바 스크립트 드롭 다운-동일한 드롭 다운에서 선택한 옵션에 따라 다른 옵션을 표시합니다.

  26. 26

    입력 값에 따라 옵션 값 변경

  27. 27

    Angularjs : 사용자 입력에 따라 드롭 다운 채우기

  28. 28

    UISearchbar 및 UITextfields 아래에 드롭 다운 제안 추가

  29. 29

    계단식 드롭 다운 및 목록에서 항목 삭제

뜨겁다태그

보관